javascript - 处理 polymer 元素继承的最佳方法

Question

给定一个元素，如:

<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>

我的问题:

• 指定额外样式的最佳方式是什么？
• 我能否将基本元素包装在附加标记中(如另一个容器)？
• 我可以从基本元素中选择元素吗？类似于 <content select=".stuff">但对于基础的阴影标记。

Answer 1

• What's the best way to specify additional styling ?

1. 像往常一样在子类 (my-custom-element) 中放置一个模板。
2. 包括 <shadow></shadow>您希望父类(super class)模板出现的元素。
3. 将样式标签放入新模板。
4. 要为来自父类(super class)模板的元素设置样式，请使用如下选择器:

:host::shadow .someclass { ... }

请参阅下面的示例。

• Can I wrap the base element in additional markup (like another container) ?

是的，您可以在 <shadow></shadow> 周围放置任何您想要的标记.

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

• Can I select elements from the base element? Something like <content select=".stuff"> but for the base's shadow markup.

没有。你不能那样投影(它是所有其他投影的反方向)。

如果你真的想从旧的影子根中挑选节点，这可以通过直接从 this.shadowRoot.olderShadowRoot 中拉出节点来在代码中完成。 .但这可能很棘手，因为父类(super class)可能对结构有期望。

示例代码:

<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>

专业提示:

• olderShadowRoot无论您是否包含 <shadow></shadow> 都会存在标记，但除非您这样做，否则它不会成为呈现的 DOM 的一部分。
• 防止olderShadowRoot(s)从创建开始，您可以覆盖 parseDeclarations (source)。任何 parseDeclarations , parseDeclaration , fetchTemplate可以覆盖各种效果。