javascript - 将 window.document 样式应用于 Polymer 2 子元素

Question

我正在开发一个应用程序，用户可以在其中通过拖放来构建网页。我们的用户可以丢弃的一些元素是 Polymer2 元素。

用户还可以将自定义样式表添加到他们的页面，如果他们这样做，其中定义的样式应该会影响 Polymer2 元素的子元素。

现在，我知道这一切是否会违背网络组件的设计行为方式，但我仍然想知道这是否可能。

我是 Polymer 的新手，不太确定该往哪个方向看。我读过有关 mixin、共享样式和自定义样式的信息，但似乎都没有为我的用例提供有效的方法。

非常感谢任何帮助。

编辑

到目前为止，我已经找到了一种可行但不理想的解决方案，因为 import将来会被弃用:

/parent-styles.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="parent-styles">
    <link rel="import" type="css" href="ref_to_page_stylesheet.min.css">
</dom-module>

然后我可以导入这个文件并使用 <style include="parent-styles"></style> .这至少允许从页面的样式表中设置 Polymer 元素的样式，但很明显，一旦样式表名称或位置更改，此解决方案就会中断，我对此不太满意。

Answer 1

There are many options for styling web components. A component that uses shadow DOM can be styled by the main page, define its own styles, or provide hooks (in the form of CSS custom properties) for users to override defaults.

为组件设置样式 <fancy-tabs>从外部看，您可以只使用它的标签名称作为选择器:

fancy-tabs {
  width: 350px;
}

外部样式总是胜过影子 DOM 中定义的样式。但这只能让你到目前为止。如果你想为 <fancy-tabs> 的内部设置样式怎么办？ ？这是您必须使用自定义 CSS 属性创建样式 Hook 的地方。

例子:

<!-- main page -->
<style>
  fancy-tabs {
    margin-bottom: 32px;
    --fancy-tabs-bg: black;
  }
</style>
<fancy-tabs background>...</fancy-tabs>

在 <fancy-tabs> 的影子 DOM 中:

:host([background]) {
  background: var(--fancy-tabs-bg, #9E9E9E);
  border-radius: 10px;
  padding: 10px;
}

在这种情况下，组件将使用黑色作为背景值，因为用户提供了它。否则，它将默认为 #9E9E9E .

引用文献:Shadow DOM v1: Self-Contained Web Components