Question

我目前正在评估Polymer作为使用自定义元素的选项，到目前为止我对这些功能印象深刻。我的JavaScript编码技巧有点缺乏，所以请耐心等待。

自定义元素是否可以接收嵌入自定义元素的Div标记，样式或CSS中的通知或更改。换句话说，是否有一种特定的方式可以了解嵌入对象的父节点的更改，如下面的示例使用简单的JavaScript，如：

document.querySelector('#test').style[['top','left','right','width','height','bottom']    [Math.floor(Math.random()*5)]]=Math.floor(Math.random()*100);

我希望上面的调用允许更改传播到所有嵌套自定义元素。

<div id="test" style="top: 400; left: 50; width: 200; height: 300;">
<x-foo></x-foo>
<x-foo></x-foo>
<x-foo></x-foo>
</div>

任何帮助表示赞赏。感谢。

Answer 1

你问了一些不同的东西，但我认为你所追求的是x-foo的造型，与其父元素具有相同造型的孩子？对于静态样式，它很容易让人感到轻松：

这很容易在CSS中完成：

<style>
#test > x-foo {
  top: 400
  left: 50;
  width: 200;
}
</style>

<div id="test" class="theme">
  <x-foo></x-foo>
  ...
</div>

x-foo元素本身可以定义:host-context() style rule，根据其所在的上下文自行设置样式：
```
:host-context(.theme) {
  /* Styles applied if an ancestor has the class "theme" */
}
```

对于动态生成的样式（不可继承），您必须将它们应用于每个元素。这与您在不使用Web组件时需要做的事情没有什么不同。您还可以在父节点上设置MutationObserver以检测对style属性的更改。

Answer 2

将px放在每个值旁边，或其他一些比例。

<div id="test" style="top: 400px; left: 50px; width: 200px; height: 300px;">

如果复杂的方法，这里肯定会发生火灾：

var test = document.querySelector('#test');
childrenInheritStyles(test);

function childrenInheritStyles(parent){
    var children = parent.children;
    var cstyles = parent.getAttribute('style');

    for(var i=0; i<children.length; i++){

        (function(c){

            cstyles.replace(/([^:]+):([^;]+);/g, function(m, g1, g2){

                c.style[g1.trim()] = g2.trim();
            });

        })(children[i]);
    }
}

如果您仍然坚持以编程方式执行此操作。

或者你可以使用它：

var test = document.querySelector('#test');
childrenInheritStyles(test);

function childrenInheritStyles(parent){
    var children = parent.children;
    var cstyles = parent.getAttribute('style');

    for(var i=0; i<children.length; i++){

        children[i].style.cssText = cstyles;
    }
}

第二种方法将取代所有样式，因此取决于你想要的东西。

没有办法自然地做到这一点。如果你想要那种继承，你必须对它进行编程或使用库。

至于查看样式何时更改，您将使用ebidel关于MutationObservers的答案，或者您可以更改上述代码以更改和传播样式。

我可以建议阅读风格属性。 About the Javascript style property

来自父<div> </div>的嵌套聚合物基于Custom Element的样式反射

2 个答案: