[WIP] Allow custom elements to be rendered to light dom or shadow dom (open, closed)

[fsodano]

Hi peeps,

We're in the middle of choosing a JS component wrapper for our design system. Svelte looks really good, best developer experience so far. Custom elements are an important part of this process because it allows teams to consume individual components in their own projects, which may then use React (even though it has known issues with custom elements, this library sorts them out for us https://github.com/BBKolton/reactify-wc/), Vue, Angular, Svelte, etc.

However, there are a couple of issues with the way it handles custom elements (#1748)

It's important to be able to render elements directly on the lightdom due to accessibility issues.

These small changes solve that specific issue:

But before looking deeper into this issue, I have a question that's more around what's the philosophy for Svelte:

Safari does not support extending built-in elements (e.g. <p is="my-svelte-component">). There is a (small) polyfill for Safari which is used in the heresy project.

Libraries like Stencil have no intention of adding polyfills for it, so I'm wondering; what's Svelte's stance on this?

Similarly to the point above, it's really important because it allows us to be able to progressively enhance a small component (such as an anchor or a paragraph) while keeping all the default attributes (like the aria- attributes) without having to re-implement them on each component.

If I'm completely missing something that already exists, or what I'm saying makes no sense at all, I'm also happy to be corrected.

Thanks.

[kmmbvnr]

I'm just a svelte user, but I could list two disadvantages in this pull request.

1. no per-element configuration. I suppose it's better to have an option to render some element in a shadow dom and others as light dom. Like stencil does.
2. This PR doesn't touch CSS related code. In a case of open DOM, CSS are still injected as inner styles, probably it's better to handle it as usual CSS

[fsodano]

Thanks mate. As previously stated... this is not a complete PR. Just waiting to see if there's interest in having these features available. Cheers.

…

On Tue, 24 Dec. 2019, 17:52 Mikhail Podgurskiy, ***@***.***> wrote: I'm just a svelte user, but I could list two disadvantages in this pull request. 1. no per-element configuration. I suppose it's better to have an option to render some element in a shadow dom and others as light dom. Like stencil does. 2. This PR doesn't touch CSS related code. In a case of open DOM, CSS are still injected as inner styles, probably it's better to handle it as usual CSS — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4073?email_source=notifications&email_token=AAGODFINQJPNYZYWCMWDDJLQ2GIPVA5CNFSM4JYGWOLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHSPERA#issuecomment-568652356>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGODFONKKLVO5M4WBJJIKTQ2GIPVANCNFSM4JYGWOLA> .

[kmmbvnr]

@fsodano thank you for the PR. It was really inspired. I'm thinking to propose a bit different approach, by allowing for a user to specify custom base class for web components.

[timonweb]

glad to see progress on this. @kmmbvnr when do you think you'll make your PR?

[kmmbvnr]

@timonweb I've just opened the issue with implementation proposal - #4168

[TehShrike]

Interesting, what are you thinking for embedding the <style> when compiled with css: true?

[fsodano]

Thanks all, seems there's some traction on this so I'm closing this WIP.

[patricknelson]

For anyone landing here looking for light DOM support with Svelte custom elements, check out svelte-retag. It includes the ability to mix/match your Svelte components and only define which ones you want to utilize as custom elements, supports slots, Vite HMR and even early (iife) execution for reduced content layout shift.

I'd be interested to know if anyone experiences any issues with it, too.