处理聚合物元素遗传的最佳方法

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

• 指定其他样式的最佳方法是什么？

1. my-custom-element像往常一样将模板放在子类()中.
2. 包含<shadow></shadow>要在其中显示超类模板的元素.
3. 将样式标记放入新模板中.
4. 要设置来自超类模板的元素的样式,请使用如下选择器:

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

见下面的例子.

• 我可以将基本元素包装在额外的标记中(比如另一个容器)吗？

是的,你可以放置你想要的任何标记<shadow></shadow>.

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

• 我可以从基本元素中选择元素吗？像<content select=".stuff">基地的阴影标记一样.

不可以.你不能这样投射(这是所有其他投影的反方向).

如果你真的想要从旧的shadow-root中挑选节点,可以通过直接从节点中拉出节点来完成this.shadowRoot.olderShadowRoot.但这可能很棘手,因为超类可能对结构抱有期望.

示例代码:

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

ProTips:

• olderShadowRoot无论你是否包含<shadow></shadow>标记,它都将存在,但除非你这样做,否则它不会是渲染DOM的一部分.
• 为了防止olderShadowRoot(s)被创建,你可以覆盖parseDeclarations(源).任何的parseDeclarations,parseDeclaration,fetchTemplate可overidden的各种效果.