Javascript 将window.document样式应用于2个子元素

我正在开发一个应用程序，用户可以通过拖放来创建网页。我们的用户可以删除的一些元素是Polymer2元素

用户还可以向其页面添加自定义样式表，如果这样做，则其中定义的样式将影响Polymer2元素的子元素

现在，我知道这一切是否违背了web组件的设计行为，但我仍然怀疑这是否可能

我对聚合物很陌生，不太确定该往哪个方向看。我读过关于混合、共享样式和自定义样式的文章，但似乎没有一个能为我的用例提供有效的方法

非常感谢您的帮助

编辑

到目前为止，我发现有一种解决方案是可行的，但并不理想，因为

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>

然后我可以导入此文件并使用

。这至少允许从页面的样式表中设置聚合元素的样式，但是很明显，一旦样式表名称或位置发生变化，这个解决方案就会中断，这一点我不太满意

有许多选项可用于设置web组件的样式。一个组件 使用阴影DOM可以由主页设置样式，定义自己的样式， 或者提供钩子（以CSS自定义属性的形式）供用户 覆盖默认值

要从外部设置组件样式，只需将其标记名用作选择器即可：

fancy-tabs {
  width: 350px;
}

外部样式总是胜过阴影DOM中定义的样式。但这只能让你走到这一步。如果要设置

的内部样式，该怎么办？这是您必须使用自定义CSS属性创建样式挂钩的地方

例如：

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

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

#9E9E9E

---

参考资料：我自己想出了一些解决办法。正如我在问题中已经说过的，它有点违背了web组件的封装哲学。它还依赖于链接标签，这些标签在将来会被弃用。最糟糕的是，我还没有做任何跨浏览器测试。。。因此：

小心使用

您可以这样使用下面的样式模块（导入后）：

（（文件）=>{
const doc=（document.|currentScript | document.currentScript）.ownerDocument；
const domModule=doc.querySelector（“#bb共享样式”）；
const template=doc.querySelector（“#样式模板”）；
const pageStyles=document.styleSheets；
constyles=template.content.querySelector（“#样式表”）；
style.type='text/css'；
processStyleSheets（）；
函数processStyleSheets（）{
for（让index=0；index

我想我理解这个例子的作用，但我认为它不能解决我的问题。特别是因为我不可能知道哪些嵌套元素以及它们的哪些属性将在页面样式表中设置样式。我可以看到这种方法还有其他一些好的用途。

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