当渲染根为 lightdom 时点亮样式

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。将它们添加到不使用 shadow DOM 的自定义元素也会使这些样式应用于与所用 CSS 选择器匹配的任何其他节点。

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

lit styles when render root is lightdom