处理聚合物元素继承的最佳方法

Posted 2023-02-19

【中文标题】处理聚合物元素继承的最佳方法

【英文标题】：Best way to deal with polymer element inheritance

【发布时间】：2014-09-03 16:01:22

【问题描述】：

给定一个类似的元素：

<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"> 的东西，但用于基础的阴影标记。

【问题讨论】：

这些都是好问题。我还没有给你答案，但我们正在努力。具体来说，我们正在与平台/规范团队一起讨论兄弟影子根中的样式解析处理。我希望很快能给你一些答案。

【参考方案1】：

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

像往常一样在子类 (my-custom-element) 中放置一个模板。 在您希望超类模板出现的位置包含 <shadow></shadow> 元素。 在新模板中添加样式标签。 要对来自超类模板的元素设置样式，请使用如下选择器：

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

专业提示：

无论您是否包含<shadow></shadow> 标签，olderShadowRoot 都会存在，但除非您包含，否则它不会成为渲染 DOM 的一部分。 要防止创建olderShadowRoot(s)，您可以覆盖parseDeclarations (source)。 parseDeclarations、parseDeclaration、fetchTemplate 中的任何一个都可以被覆盖以获得各种效果。

【讨论】：

你能解释一下#4中的例子吗（以及为什么你需要那个特定的选择器）。有没有其他样式的方法？

今天，本机行为是将影子根中的样式范围限定到该特定影子根。但是，:host::shadow 选择器指的是当前主机中的 all 影子根，包括继承的影子根。这是一个生硬的工具，但它允许:host::shadow .foo 在当前主机的所有影子根中使用foo 类设置任何样式。您也可以通过 `\deep\` 组合器进行样式设置，但这也很生硬。我们正在推进规范，并在这里尝试使用元系统来改善人体工程学，请参阅core-style。

为什么你需要有<script> inside <polymer-element> ？例如：在外面：github.com/geelen/x-gif/blob/gh-pages/src/x-gif.html 发生了什么事？他们为什么把它放在外面？

您可以将脚本放在您想要的任何位置。但是，在导入时，如果将脚本放在 <polymer-element> 中，则在调用 Polymer() 时可以省略元素名称（即，您可以只调用 Polymer( ... );）。

为什么所有的例子都不这样做？似乎也没有记录（或者我没有正确查看）。