如何使用嵌套组件创建和设置 Svelte 3 自定义元素的样式？

Question

我正在尝试在 svelte 3 中创建 custom-element（网络组件）。我找不到任何方法来为 css 中的嵌套组件设置样式。 Svelte 在将样式注入到 ShadowDOM 内部 <style> 之前删除样式。

问题是我想在我的根元素中嵌套组件。例如：

RootComponent（苗条的自定义元素）
- （导入）FooComponent
- （导入）BarComponent

导入到自定义元素的所有组件必须将编译器选项设置为 <svelte:options tag="component-name" />。

设置此选项后，嵌套组件将按预期工作并注入到根元素 ShadowDOM 中。问题是嵌套组件中定义的 styles 没有被注入。此问题的解决方法是将它们作为 ShadowDom 中的全局样式注入到根元素 <style> 中。 (Un)幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。

这里是REPL

自定义元素在 REPL 上并不真正起作用，正如 Conduitry 写道：

The compiler options in the REPL don't actually affect the code that >is run, just the code that is displayed. So enabling customElement >doesn't mean you are building and running a web component

所以它更像是一个代码示例，而不是工作代码示例。

我想知道是否有另一种方法可以使用嵌套组件和适当的样式创建精巧的自定义元素。
有没有办法禁止删除未使用的 css？

https://imgur.com/a/zZia566

从 <div class="nested"> 开始从 Nested.svelte.

导入的嵌套组件

<style> 元素应该注入 .nested class 但它被 svelte 编译器删除了。

Answer 1

这是因为当customElement选项打开时，组件中的每个样式都会被注入到自定义元素的shadowRoot中。

class YourComponent extends SvelteElement {
        constructor(options) {
            super();

            this.shadowRoot.innerHTML = `<style>.foo{color:red;}</style>`;
// continues

因此，为了使 style 出现，您必须使用 svelte 组件作为自定义元素，而不是作为 svelte 组件。

您的 App.svelte 应该如下所示。

<script>
    import Foo from './Foo.svelte'
    import Bar from './Bar.svelte'
</script>
<svelte:options tag="web-component" />

<foo-component/>
<bar-component/>

但是，这并没有解决与自定义元素相关的问题。

:全局选择器没有转化为实际的全局选择器。
每个嵌套组件都会生成 shadowRoot，而大多数情况下您只需要顶级组件。

从与自定义元素相关的 svelte 存储库中查看以下一些问题。

svelte 似乎还没有完全支持自定义元素中的样式级联，应该在以后处理。

签入 svelte v3.12.1。

Answer 2

感谢brunoalano for sending me this: svelte-custom-element-template。它解决了自定义构建脚本的样式问题。

如何使用嵌套组件创建和设置 Svelte 3 自定义元素的样式？

How to create and style svelte 3 custom elements with nested components?

web-component

shadow-dom

custom-element

svelte

svelte-component