Embedded styles do not work?

[bestguy]

Great library, but it looks like embedded component styles are not working.
Adding this to Counter.html has no effect on Chrome or Safari:

<style>
  button {
    color: red;
  }
</style>

If it helps, I was using another approach that uses the older(?) document.registerElement(...) and it does pick up the styles

class SvelteElement extends HTMLElement {
...
}

return document.registerElement(tagName, SvelteElement);

[bestguy]

After looking at this it is may be due to use of shadow DOM:

class SvelteElement extends HTMLElement {
  constructor () {
    super();
    this.target = this.attachShadow({ mode: 'closed' });

https://github.com/sveltejs/svelte-custom-elements/blob/master/src/index.js#L6

I wasn't using in my sample above, I will confirm with a fork that disables this.

[bestguy]

"Fixed" in #2 - what do you think about this approach @Rich-Harris ?
It could also be an option to close and/or not use Shadow at all.

I have a secondary reason for not wanting closed shadow DOM - I have a number of use cases where I'd like to make reusable components, but would like to theme them from global CSS such as Bootstrap, and the other web component+closed shadow DOM solutions are really awkward imho.

[Rich-Harris]

Thank you! Use of mode: 'closed' wasn't intentional, just a product of me not really knowing what it meant. Could become an option in future I suppose, but if my updated understanding is correct then we can probably get away with it just being open. Released as 1.0.2

[morewry]

I just ran into the same problem (I'm using 1.0.2) and came across this issue. I'm a little confused, because open mode shadow DOM doesn't mean that global CSS can apply. The main difference is that an element hosting an open shadow DOM has a shadowRoot property that provides access to the root node of the shadow DOM.

See https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af. For the styles to work correctly with a real, native shadow DOM (not polyfilled) they can't be hoisted to the hosting document, but need to be embedded in the shadow DOM fragment.

[Rich-Harris]

@morewry as of Svelte 1.37, you can compile directly to custom elements:

const { code, map } = svelte.compile(source, {
  customElement: true
});

Your components just need to declare a tag name:

<script>
  export default {
    tag: 'my-element'
  };
</script>

Alternatively, you can specify a name in the compile options:

const { code, map } = svelte.compile(source, {
  customElement: {
    tag: 'my-element'
  }
});

It does use shadow DOM, and embeds the styles inside the element accordingly. It's still slightly experimental, but all future custom elements work will take place in Svelte itself rather than svelte-custom-elements.

I'll add a note on the README for this project stating that it's deprecated.

[morewry]

Nice, thanks! sveltejs/svelte#797