web-component - 如何使用嵌套组件创建和样式化 3 个自定义元素？

Question

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

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

RootComponent( slim 的自定义元素)

(进口) FooComponent

(进口) BarComponent

如此处所述:svelte-custom-element

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

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

我的目标是使用 svelte 创建 Web 组件，然后在 svelte 之外将其用作 native 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

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

我想知道是否有另一种方法来创建具有嵌套组件和适当样式的 slim 自定义元素。

有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

来自 <div class="nested">启动从 Nested.svelte 导入的嵌套组件。
<style>元素应该有 .nested注入(inject)的类，但它被 svelte 编译器删除。

Answer 1

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

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

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

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

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

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

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

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

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

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

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

nested component in custom element does not inherit style #2605

:global(...) not working in custom elements #2969

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

checkin slim v3.12.1。