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

Question

我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。

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

• RootComponent（纤细的自定义元素）
  • (进口) FooComponent
  • (进口) BarComponent

如此处所述：svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

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

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

这是REPL

正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：

REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件

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

1. 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
2. 有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。

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

Answer 1

This is because when customElementoption is on, each style in a component is injected into the shadowRootof the custom element.

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/>

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

1. :global 选择器不会转换为实际的全局选择器。

2. 每个嵌套组件都会产生shadowRoot，而大多数情况下您只需要顶级组件。

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

• 自定义元素中的嵌套组件不继承样式 #2605
• :global(...) 在自定义元素中不起作用 #2969

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

签入 svelte v3.12.1。

Answer 2

感谢brunoalano给我发送了这个：svelte-custom-element-template。它通过自定义构建脚本解决了样式问题。