Optional Shadow DOM for custom elements

[kylecordes]

(Feature request)

Currently, Svelte always uses Shadow DOM for custom elements. This has the effect of blocking application level CSS, as well as other effects. Many developers building custom elements with other tools have found that they don't always want this behavior; that sometimes it is more useful to not use Shadow DOM. And indeed, many tools for building custom elements make Shadow DOM optional.

For example, Stencil has a switch for this, which defaults to "off".

https://stenciljs.com/docs/styling

Polymer's lit-element uses Shadow DOM by default, but provides a hook _createRoot() to turn it off with a line of code as needed.

https://github.com/Polymer/lit-element

hyperHTML-Element appears to default to shadow DOM, but can be turned off easily.

https://viperhtml.js.org/hyperhtml/documentation/#components-2

SkateJS supports both Shadow DOM and light DOM.

http://skatejs.netlify.com/

Based on all this, and to improve the broad usability of Svelte custom elements, a Svelte feature request: make Shadow DOM optional.

[Rich-Harris]

I agree with this — I'm going to close the issue though as it's a duplicate of #1168