当渲染根是光的时候，点燃的样式

Question

所以我有下面的styles

  static styles = [css, icons];

然后，我将renderRoot设置为lightdom：

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

这样，样式就不适用了，我必须手动添加：

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

如果我移除createRenderRoot，样式在不设置render函数中的<style>标记的情况下工作。

有人能告诉我我做错了什么吗？或者为什么会发生这种事？

Answer 1

lit的createRenderRoot的默认行为是创建阴影根，并将静态styles属性中设置的样式添加到所述阴影根。

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

造成这种情况的主要原因是，只有在阴影DOM中才能限定样式的作用域。将它们添加到不使用影子DOM的自定义元素中，还将使这些样式应用于与所使用的CSS选择器匹配的任何其他节点。

这基本上给您留下了两个选项：

1. 只使用轻型DOM，并将样式移动到CSS文件中的全局样式表。

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