如何使用嵌套组件创建和样式svelte 3自定义元素？
我试图在svelte 3中创建自定义元素 (web组件)，我找不到任何方法来样式嵌套的css组件。Svelte在将样式注入到<style>中的ShadowDOM中之前先移除它们。
问题是，我希望在根元素中有嵌套组件。例如：
- RootComponent (svelte自定义元素)
- (进口) FooComponent
- (进口) BarComponent
如前所述：svelte-定制元素
导入自定义元素的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />。
使用此选项集，嵌套组件按预期工作，并注入根元素的ShadowDOM中。问题是没有注入嵌套组件中定义的styles。解决这个问题的方法是将它们作为ShadowDom中的全局样式注入根元素的ShadowDom中。幸运的是，当自定义元素还不存在时，svelte会在编译过程中自动删除所有未使用的样式。
我的目标是用svelte创建web组件，然后将它作为本地web组件使用在svelte之外。
这是REPL
自定义元素并不像控制性所写的那样真正地在REPL上工作：
REPL中的编译器选项实际上不会影响>正在运行的代码，只会影响显示的代码。因此，启用customElement >并不意味着您正在构建和运行web组件
所以它更像是一个代码示例，而不是工作示例。
- 我想知道是否还有另一种方法来创建带有嵌套组件和适当样式的svelte自定义元素。
- 是否有一种方法可以禁用删除未使用的css？
从<div class="nested">启动从Nested.svelte导入的嵌套组件。
<style>元素应该被注入.nested类，但是它被svelte编译器删除。
回答 2
Stack Overflow用户
发布于 2020-10-26 14:11:57
感谢布鲁那诺发送给我的这个：svelte.定制元素.模板。它解决了自定义构建脚本的造型问题。
Stack Overflow用户
发布于 2019-11-19 14:25:44
这是因为当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。
https://stackoverflow.com/questions/57802087
复制相似问题
腾讯云开发者
