禁用lit-element中的样式隔离

Question

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

    createRenderRoot() {
      return this;
    }

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

Answer 1

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

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

Answer 2

它可以像设计的那样工作。上面的版本没有使用ShadowDom。所以应用了样式。在我的例子中，当样式冒泡时，所有组件都必须禁用ShadowDom。但另一个问题出现了。

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

但我需要老虎机。

Answer 3

是的，但是禁用阴影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对象被共享时，它不会再次下载或解析-您的所有组件都会获得对相同样式的引用，而不是级联下来的全局样式。