javascript - 当渲染根为 lightdom 时点亮的样式

Question

所以我有以下styles :

  static styles = [css, icons];

然后我设置了renderRoot走向光明:

protected createRenderRoot(): Element | ShadowRoot {
    return this;
}

这样样式就不会应用，我必须手动添加:

render() {
  return html`
 <style>
       ${css.cssText}
       ${icons.cssText}
 </style>

如果我删除 createRenderRoot ，样式无需设置 <style> 即可工作。标签 render功能。

谁能告诉我我做错了什么？或者为什么会发生这种情况？

Answer 1

lit 的 createRenderRoot 的默认行为是创建一个 Shadow Root，并将静态 styles 属性中设置的样式添加到该 Shadow Root。

因此，当您重写createRenderRoot以使用this作为根时(因此，根本不使用shadow DOM)，您还将删除添加样式的代码也是。

这样做的主要原因是样式只有在 Shadow DOM 内部时才能确定作用域。将它们添加到不使用 Shadow DOM 的自定义元素也会使这些样式应用于与所使用的 CSS 选择器匹配的任何其他节点。

这基本上给你留下了两个选择:

1. 继续仅使用 light DOM，并将样式移至 CSS 文件中的全局样式表。
2. 使用影子 DOM

更多信息:https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot