我正在尝试在 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 的元素中。(Un) 幸运的是,当自定义元素尚不存在时,svelte 会在编译期间自动删除所有未使用的样式。
我的目标是使用 svelte 创建 Web 组件,然后在 svelte 之外将其用作本机 Web 组件。
这里是REPL
正如Conduitry所写的那样,自定义元素在 REPL 上并不真正起作用:
REPL 中的编译器选项实际上不会影响运行的代码,只会影响显示的代码。因此启用 customElement > 并不意味着您正在构建和运行 Web 组件
所以它更像是一个代码示例而不是一个工作示例。
- 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
- 有没有办法禁用删除未使用的 css?
from<div class="nested">
启动从 Nested.svelte 导入的嵌套组件。
<style>
元素应该.nested
注入类,但它被 svelte 编译器删除。