在 lit-element 中禁用样式隔离答案

【问题标题】：Disable style isolation in lit-element在 lit-element 中禁用样式隔离
【发布时间】：2021-05-23 12:56:50
【问题描述】：

是否可以将框架样式应用于嵌套的 lit-element？一个想法是禁用shadow dom。我试过了。

    createRenderRoot() {
      return this;
    }

它不能满足我的需要。我看到我可以将样式重新编译为组件。但现在我正在寻找一个更简单的解决方案。有一个解决方案 - Specify the render root。这个解决方案摆脱了shadowRoot。样式已应用，但不起作用。

【问题讨论】：

标签： lit-element

【解决方案1】：

如果你想使用全局样式，你必须在整个应用树中禁用 Shadow DOM：如果单个组件有一个影子根，它的整个子树 won't be affected by external styles。

无论如何，正如您所注意到的，插槽只能在启用影子 DOM 的情况下工作。在这种情况下，仍然可以使用通用样式库/框架，例如参见 Sharing Styles、Using Bootstrap in Web Components、Importing external stylesheets。

【讨论】：

lit-element-router 在我的项目中使用。它使用插槽。这就是为什么插槽很重要。我正在寻找替代方案。

【解决方案2】：

是的，但禁用 shadow DOM 是错误的做法。

LitElement 使用采用的样式表，它允许您加载/创建一次 CSS，但将其应用于组件的影子 DOM。您可以全局创建它，将其应用到每个组件中，并有效地拥有所有组件共享的样式，但（关键）不适用于您加载的任何外部组件或加载您的组件的任何外部应用程序。

你可以这样做：

// common-styles.js
export const styles = css`...`;

// any-component.js
import { styles } from 'common-styles.js';
...
static get styles () { return [styles]; }

由于styles 对象是共享的，它不会再次下载或解析 - 您的所有组件都会引用相同的样式，而不是向下级联的全局样式。

【讨论】：

【解决方案3】：

它按设计工作。上面的版本没有使用 ShadowDom。因此应用了样式。就我而言，样式冒泡时的所有组件都必须禁用 ShadowDom。但是出现了另一个问题。

createRenderRoot() {
  /**
   * Render template without shadow DOM. Note that shadow DOM features like
   * encapsulated CSS and slots are unavailable.
   */
    return this;
 }

但我需要插槽。

【讨论】：