与自定义 HTML 元素共享样式？

我开始使用自定义元素，但我无法弄清楚的一件事是共享样式。例如，如果我有 2 个自定义元素，<element-1> and <element-2>，两者都包含<button>的，我希望所有按钮都有一定的样式，例如font-size:20px.

我考虑过的选项是：

1. Use a <stylized-button>自定义元素而不是<button>在自定义元素中。当外部采购时，这是一个问题<element-1>。如果您还想要其他样式（例如color:red）仅在<element-1>按钮而不是<element-2>纽扣。

2. 据我从聚合物的文档 [1] 得知，聚合物也没有解决方案。

3. /dead/ and :shadow看起来很有希望，但不再受支持。

4. 相似地@apply[2]看起来很有希望，但该提案被撤回了。

5. ::part and ::theme[3] 似乎更有希望，但尚未得到支持。

6. 使用js支持::part and ::theme[4]。我想如果不解决所有情况的话，这将非常脆弱。

7. 将共享样式显式添加到每个自定义元素。

    class Element1 extends HTMLElement {
        constructor() {
            this.shadowRoot.addElement(sharedStyle);
        }
    }
   

   这似乎非常受限且手动。还可能影响性能？如果您外部采购也会有问题<element-1>.

现在，我认为 #6 可能是最好的，因为它似乎是最通用/最容易使用的，无需专门为其构建，而且在实现时，它将使过渡到 #5 变得微不足道。但我想知道是否还有其他方法或建议？

[1] https://www.polymer-project.org/3.0/docs/devguide/style-shadow-dom https://www.polymer-project.org/3.0/docs/devguide/style-shadow-dom

[2] http://tabatkins.github.io/specs/css-apply-rule/ http://tabatkins.github.io/specs/css-apply-rule/

[3] https://meowni.ca/posts/part-theme-explainer/ https://meowni.ca/posts/part-theme-explainer/

[4] 一个简单的实现和使用它的示例：https://gist.github.com/mahov/cbb27fcdde4ad45715d2df3b3ce7be40 https://gist.github.com/mahhov/cbb27fcdde4ad45715d2df3b3ce7be40

执行：

document.addEventListener('DOMContentLoaded', () => {
    // create style sheets for each shadow root to which we will later add rules
    let shadowRootsStyleSheets = [...document.querySelectorAll('*')]
        .filter(element => element.shadowRoot)
        .map(element => element.shadowRoot)
        .map(shadowRoot => {
          shadowRoot.appendChild(document.createElement('style'));
          return shadowRoot.styleSheets[0];
        });

    // iterate all style rules in the document searching for `.theme` and `.part` in the selectors.
    [...document.styleSheets]
        .flatMap(styleSheet => [...styleSheet.rules])
        .forEach(rule => {
          let styleText = rule.cssText.match(/\{(.*)\}/)[1];

          let match;
          if (match = rule.selectorText.match(/\.theme\b(.*)/))
            shadowRootsStyleSheets.forEach(styleSheet => styleSheet.addRule(match[1], styleText));
          else if (match = rule.selectorText.match(/\.part\b(.*)/))
            shadowRootsStyleSheets.forEach(styleSheet => styleSheet.addRule(`[part=${match[1]}]`, styleText));
        });
  });

和用法：

<style>
  .my-element.part line-green {
    border: 1px solid green;
    color: green;
  }

  .theme .line-orange {
    border: 1px solid orange;
    color: orange;
  }

  /*
    must use `.part` instead of `::part`, and `.theme` instead of `::theme`
    as the browser prunes out invalid css rules form the `StyleSheetList`'s. 
  */
</style>

<template id="my-template">
  <p part="line-green">green</p>
  <p class="line-orange">orange</p>
</template>

<my-element></my-element>

<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      const template = document.getElementById('my-template').content.cloneNode(true);
      this.shadowRoot.appendChild(template);
    }
  });
</script>

您可以使用@import url将外部样式表导入到不同的自定义元素中。

或者现在您也可以使用<link rel="stylesheet">在自定义元素 Shadow DOM 中：

<template id="element-1">
  <style> 
      @import url( 'button-style.css' )
  </style>
  <button>B-1</button>
</template>

<template id="element-2">
  <link rel="stylesheet" href="button-style.css">
  <button>B-2</button>
</template>