注：以下答案的实质内容不再相关，因为讨论的功能已被弃用一段时间。不要使用示例代码，但请随意浏览Internet的过去。

在一个完整的Shadow DOM实现中，CSS有一个::shadow伪类，还有/deep/组合子。
::shadow伪类允许您进入元素下的shadow DOM，并且它匹配shadow根。/deep/组合子有效地完全打开了影子DOM。
因此，如果您有一个<x-foo>元素，其中包含<span>元素，您可以使用

x-foo::shadow span { color: red; }

或者将任何阴影DOM中的所有<spans>设置为红色：

body /deep/ span { color: red; }

Shadow DOM / CSS的当前状态是可以链接到外部样式表。MDN上的更多信息：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Internal_versus_external_styles
然后，您可以有某种实用程序样式表（Tailwind或类似的），所有组件都引用它，这样就不会重复CSS。从理论上讲，CSS文件只需要下载一次，缓存一次，然后每个自定义元素都可以使用其中的类（只要它们都链接到它）。

看看这个鲜为人知的方法：
<core-style>聚合物元件
可以在html导入文件中定义样式：

<core-style id="x-test">
  :host {
    backgound-color: steelblue;
  }
</core-style>

然后你可以在多个元素中使用它们：

<polymer-element name="x-test" noscript>
  <template>
    <core-style ref="x-test"></core-style>
    <content></content>
  </template>
</polymer-element>

在this well written article中，您可以阅读更多关于如何使用该技术的信息。
然而，我能想到的一个缺点是不可能通过这种技术使用SASS，因为样式是在<core-style>标记中定义的，而不是在<style>元素中定义的，并且没有明确的方法来导入外部样式表。

我想我明白你问的是什么。可以在每个自定义元素中使用link来包含主样式或扩展包含它的现有元素。例如（使用聚合物）：

<polymer-element name="ui-button" noscript>
  <template>
    <link rel="stylesheet" href="main.css"/>
    <div class="class-from-main" style="">
      <content></content>
    </div>
  </template>
</polymer-element>

我觉得值得读给你听：https://github.com/necolas/normalize.css/issues/408

这里有一个它工作的例子：http://jsbin.com/zayih/1/edit?html,css,output
尽管在使用#placeholder定位时似乎不起作用
在Chrome devtools配置选项卡中打开“Show user agent shadow DOM”，然后检查<input>以了解我的意思