当渲染根为 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，样式就可以工作，而无需<style>在render函数中设置标签。

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

Answer 1

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

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

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

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