javascript - 渲染根为 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。

谁能告诉我我做错了什么？或者为什么会这样？

score 2 · Accepted Answer

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

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

这样做的主要原因是样式只能在 shadow DOM 中进行限定。将它们添加到不使用 shadow DOM 的自定义元素也会使这些样式适用于与所使用的 CSS 选择器匹配的任何其他节点。

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

1 回答 1