Javascript 处理高分子元素遗传的最佳方法

给定如下元素：

<polymer-element name="custom-element">
    <template>
        <style>
            #container {
                color: red;
            }
        </style>
        <div id="container" on-click="{{clickContainer}}">
            ... lots of other stuff here ...
        </div>
    </template>
    <script>
        Polymer('custom-element', {
            clickContainer: function() {

            }
        });
    </script>
</polymer-element>

我想用另一个元素来包装第一个：

<polymer-element name="my-custom-element" extends="custom-element">
    <!-- extra styling -->
    <script>
        Polymer('my-custom-element', {
            clickContainer: function() {
                this.super();
            }
        });
    </script>
</polymer-element>

我的问题：

指定附加样式的最佳方式是什么？ 我可以像其他容器一样将基本元素包装在其他标记中吗？ 我可以从基本元素中选择元素吗？类似于但用于基础的阴影标记。 指定附加样式的最佳方式是什么？ 像往常一样，在子类my custom元素中放置一个模板。 包括希望超类模板出现的元素。 将样式标记放入新模板中。 要设置来自超类模板的元素的样式，请使用如下选择器： ：host：：shadow.someclass{…}

见下面的例子

我可以像其他容器一样将基本元素包装在其他标记中吗？ 是的，你可以把你想要的任何标记放在地图上

ProTips：

无论是否包含标记，OlderShadorRoot都将存在，但除非包含标记，否则它不会成为渲染DOM的一部分。 要防止创建olderShadowRoots，可以重写parseDeclarations。parseDeclaration、parseDeclaration、fetchTemplate中的任何一个都可以被覆盖以获得各种效果。

---

这些都是好问题。我还没有答案，但我们正在努力。具体来说，我们正在与平台/规范团队讨论兄弟阴影根中的样式解析的配置。我希望很快能为您提供一些答案。您能解释一下4中的示例以及为什么需要特定的选择器吗。现在，本机行为是将阴影根中的样式范围限定到特定的阴影根。但是，：host:：shadow选择器引用当前主机中的所有阴影根，包括继承的阴影根。这是一个钝的工具，但它允许：host:：shadow.foo在当前主机的所有阴影根中使用foo类对任何内容进行样式化。您也可以通过“\deep\”combinator进行样式设置，但这也很简单。我们正在推动规范，同时也在试验改进人体工程学的元系统，请看。为什么你需要有内部的？在这儿，在外面，发生了什么事？他们为什么把它放在外面？你可以把剧本放在任何你想放的地方。但是，在导入中，如果将脚本放在中，则在调用Polymer时可以忽略元素名称，即，您可以只调用Polymer{…}；。为什么所有的例子都不能做到这一点？似乎也没有记录下来，或者我没有正确地查看。

<div>
  <shadow></shadow>
</div>

<polymer-element name="my-custom-element" extends="custom-element">
<template>

  <style>
      /* note that :host::shadow rules apply 
         to all shadow-roots in this element,
         including this one */
      :host::shadow #container { 
        color: blue;
      }
      :host {
        /* older shadow-roots can inherit inheritable 
           styles like font-family */
        font-family: sans-serif;
      }
  </style>
  <p>
    <shadow></shadow>
  </p>

</template>
<script>

  Polymer('my-custom-element', {
    clickContainer: function() {
      this.super();
    }
  });

</script>
</polymer-element>