[help] Failed to create custom components

[pahhh-blo]

How do I use global custom components with svelte kit? I don't understand the custom components section of the docs.

Could you provide an example of the contents of components.js?

<!-- EDIT: Here's the mistake. This file should be ./src/layout.svelte -->
<!-- ./src/routes/__layout.svelte --> 

<script context="module">
  import { h1, p, li } from './components.js';
  export { h1, p, li };
</script>

I want the classes on this p.svelte component to be applied to every <p> tag.

<!-- ./lib/components/p.svelte -->
<p class="text-4xl text-blue-600"><slot /></p>

How exactly do I export this <p> component using a JavaScript file?

[ProQuestionAsker]

I'm not sure if this is how this was intended to work, but I did get something working with custom components! 🎉

Here's what I needed:

<!-- p.svelte -->

<p class="text-4xl text-blue-600"><slot /></p>

// components.js 

import p from './p.svelte'

export {p}

// layout.svelte 

<script context="module">
    import { p } from './components/';
    export { p };
</script>

// rest of your layout content goes here

Essentially, create a custom .svelte component that styles the element the way you need it to. Import that into components.js then export it (along with any other custom components). Then import components.js into the context="module" section of your layout file. Hope this helps!

[pngwn]

In the case of :

[link](https://google.com)

Which would normally become:

<p>
  <a href="https://google.com">link</a>
</p>

A custom component would become:

<script>
  import { Components } from './component/path.svelte';
</script>

<p>
  <Components.a href="https://google.com">link</Components.a>
</p>

So components would look like this:

<script>
  // href should be passed in as a prop
  export let href;
</script>  


<a {href}>
  <slot /> <!-- this will just be the text content typically -->
</a>

If that makes sense (unless I'm missing something here).

[ProQuestionAsker]

Oh! Totally missed that href would become a prop. Got it, this makes sense. Thank you!

[pahhh-blo]

This is the solution. My mistake was using svelte kit layouts: __layouts.svelte. The layouts for custom components must not have double underscore. Use a layout.svelte file outside of the /routes folder, so that it doesn't create a route for your layout file.

[Ahidada]

It's finally working.
I encountered an obscure problem in the middle, when creating a p.svelte file, the IDE didn't recognise it as a svelte, but I was able to use webstorm's create svelte file option. 😭

[Ahidada]

This customisation doesn't work for code blocks, the first time I tried to customise the pre tag, in order to use DaisyUI, then it always didn't work.
The h1 and p tags can be customised with no problem.

[rpf3]

I am also unable to get a custom component working. As far as I can tell I have everything set up correctly but when the HTML is rendered it is not picking up my classes.

<!-- $lib/components/markdown/h1.svelte -->

<h1 class="font-bold"><slot /></h1>

<!-- __layout.svelte -->

<script lang="ts" context="module">
	import h1 from "$lib/components/markdown/h1.svelte";

	export { h1 };
</script>

<slot />

When my .svx file renders, the # Header Markdown is still being rendered as a <h1> without the class attribute. Is there something in the mdsvex config that I might be overlooking?

[babichjacob]

Judging by the __layout.svelte comment, that's your SvelteKit layout, not your mdsvex layout, so it doesn't use custom components in place of elements.

[pngwn]

There have been a few issues about kit layouts and mdsvex layouts. I wonder if there is a way to integrate them both. I'm not sure if that will be more or less confusing. mdsvex layouts are more flexible than kit layouts in some regards and mdsvex has more control over them but kit layouts are more intuitive. I'll have to think about this, I'm not sure what the best course of action might be.

[rpf3]

Thank you for that, cleared up my confusion.