在 lit-element 中禁用样式隔离

如何解决在 lit-element 中禁用样式隔离

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

    createRenderRoot() {
      return this;
    }

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

解决方法

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

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

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

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

但我需要插槽。

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

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

您可以执行以下操作：

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

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

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