Can't get it working

[babakfp]

Hi

I'm not sure if I correctly understood what this library does. Can I use this and export Svelte components to Web Components and use those Web Components in for example a pure HTML project?

If the answer is yes, well then, I tried using it for this library: https://github.com/babakfp/scrollephant and this is the result.

This is what I expect:

This is the result:

Can you @patricknelson please take a look into my library and try to get it to work for me? 😭 I think it's been a year that I've been struggling with converting this library to work with Web Components so I can use it in a PHP project...

Thanks 🌸🌸🌸

[patricknelson]

Can I use this and export Svelte components to Web Components and use those Web Components in for example a pure HTML project?

Sure (as long as JS is also ok 😅). Ironically the project you linked uses SvelteKit, which is of course far more than just HTML/JS. Note that svelte-Retag operates well on a foundation of just HTML/JS (and maybe Vite as part of your dev/build pipeline).

I tried using it for this library: https://github.com/babakfp/scrollephant and this is the result.

I would need to see the code that you’re actually running. I searched that repo and I don’t see svelte-retag actually being referenced at all. What’s the code you’re using to invoke svelte-retag and what are the errors you’re receiving?

If it helps, essentially the way it works is as follows, assuming you’re starting with a plain Vite project and have svelte installed (not SvelteKit, etc… just svelte):

1. You have your main JS entry point code (can be typescript, plain JS, etc) like main.js
2. Instead of mounting your Svelte components manually into the HTML (like the docs say) you import svelte-retag and each of your components you want to turn into a custom element (web component) and call svelteRetag(…) for each custom element you want to have defined.

Also note that SvelteKit isn’t necessary at all in any of that (so I typically recommend folks avoid it unless they need it for something else). I’m guessing maybe that is what is tripping you up. SvelteKit is fine for a full blown and fully fledged separate/demo site maybe, but svelte-retag is useful for the more fundamental/basic leveraging of your Svelte components as web components (custom elements). So, you’ll need some way to setup a JS file that imports and calls svelteRetag() so that those custom elements get defined for you.

See my hello world demo, specifically the main.js entrypoint that actually defines the component.

[patricknelson]

p.s. One thing you could do is manually define every one of your components as a custom element tag, then compose them in plain HTML (like my demo page). This doesn’t use SvelteKit at all per se. That’s not to say SvelteKit won’t work (it’s compatible with custom elements) but you have to think of svelte-retag (and custom elements / web components) as a totally separate abstraction that can be included and used anywhere custom elements can be used. 😄 That’s the power of it, actually.

Cool thing about svelte-retag is that it supports both context + nesting, so it’s a great use case for what you’re doing, I think. I’d like to see it working too.

[babakfp]

Hi

Thank you for your quick response.

Sure (as long as JS is also ok 😅).

JS is ok too 😄

Ironically the project you linked uses SvelteKit, which is of course far more than just HTML/JS. Note that svelte-Retag operates well on a foundation of just HTML/JS (and maybe Vite as part of your dev/build pipeline).

Yeah, I'm using SvelteKit to showcase demos and stuff like that.

I would need to see the code that you’re actually running. I searched that repo and I don’t see svelte-retag actually being referenced at all.

Yeah, sorry about that. You can now check it out here: https://github.com/babakfp/scrollephant/tree/svelte-retag

What’s the code you’re using to invoke svelte-retag and what are the errors you’re receiving?

There are no errors. CSS looks broken and JS acts like it doesn't exist. When using the mouse wheel, the sections are supposed to scroll, etc.

After cloning the project, you can run the dev command and see how the library works on the home page.

index.html this is the demo I'm trying to run, which results in the above screenshot.

in package.json I have svelte-retag installed. And there are two commands for running Vite (wc:build, wc:dev).

vite.config.wc.ts this is the config file for creating the web components, separate from the vite config which runs SvelteKit.

wc.js this is the file that contains svelte-retag code. This file is called inside vite.config.wc.ts.

You can move the files inside src/package to a svelte/vite project and they will work with no issues, if you needed to try things out outside of SvelteKit.

Cool thing about svelte-retag is that it supports both context + nesting, so it’s a great use case for what you’re doing, I think. I’d like to see it working too.

Yeah, it would be awesome to get it working 😀

Thanks again.

[patricknelson]

First issue I found was that you're not referencing wc.js properly, so nothing really runs at all in wc:dev mode, but that's easy to fix.

Everything is just fine, it appears that you're styling is breaking encapsulation a bit, at least in a way that is not compatible w/ custom elements, not just svelte-retag since you had some direct child selectors (i.e. >) that were breaking styling, that's it. I submitted a quick hack proof of concept that fixes it using a known working layout (turned out to not be necessary). See PR babakfp/scrollephant#1 and the screenshots attached at bottom of this comment:

Essentially:

1. When converting to custom elements, your generated HTML will always at minimum also have the tag in between, e.g. <scrollephant-wrapper> will always be present and it's children will be nested under that, even if in your original/raw Svelte component that is not the case. This is not possible to workaround. So, I strongly recommend against using direct descendent CSS selectors and adjacent sibling selectors (> and +, etc) which rely on such precise DOM positioning, if you can help it. Screenshots showing the issue below.
2. For now, an additional <svelte-retag> wrapper is added for iife/umd compilation support, but I'm working on that (see Getting rid of the svelte-retag wrapper #20) -- that wasn't breaking this per se (again, see point 1 above).
3. Moving forward, ensure you do your testing in the svelte-retag version to help avoid selector/styling issues like this (assuming it's intended to be used both as direct Svelte components and custom elements as well). Just for compatibility so you can ensure changing in one doesn't break the other.

After that though, it seems minor since it seems to work beautifully after my hack. I do not know if that lack of > will break anything, but I suggest you find a better way to select that child element somehow so you can style it. 😅

---

[babakfp]

Hi

After seeing the styling issue you mentioned, I fixed it and now things work as expected 🎉

I'll get back to this later on...

Thank you so much for helping and also for making this library 🌸🌸🌸

[patricknelson]

Welcome! I've always got my eyes out for any possible bugs in the library, particularly since we'll be using it pretty heavily in production here at my company, so thanks for at least bringing this up.