Polymer 隔离聚合物自定义图元，以便在其他自定义图元中使用

是否可以确保某些自定义元素仅在特定自定义元素中可用？

例如，我创建了一个

站点标题

和一个

帮助图标

元素

<polymer-element name="site-heading">
    <template>
        <h1>
            <content></content>
            <content select="help-icon"></content>
        </h1>
    </template>
<polymer-element>

<polymer-element name="help-icon">
    <template>
        <span class="help">
            <img src="/image/help.png" />
            <content></content>
        </span>
    </template>
<polymer-element>

不！

救救我！

---

更新2:@ebidel

这种关系似乎没有得到真正的支持，甚至可能不在规范中。这是一个现实世界中的案例，我认为考虑到范围（孤立的？）元素，这些案例应该很重要

让我们假设一个供应商将创建一个可交付的web组件。例如，SoundCloud将创建一个

元素。播放器需要一个曲目列表，因此他们创建一个

{{HTML for description pane}}

元素

<polymer-element name="site-heading">
    <template>
        <h1>
            <content></content>
            <content select="help-icon"></content>
        </h1>
    </template>
<polymer-element>

<polymer-element name="help-icon">
    <template>
        <span class="help">
            <img src="/image/help.png" />
            <content></content>
        </span>
    </template>
<polymer-element>

元素仅用作

的子元素：

• 目前，理论上，
  是完全正确的，直到一个新的web组件定义了一个
  元素

<polymer-element name="site-heading">
    <template>
        <h1>
            <content></content>
            <content select="help-icon"></content>
        </h1>
    </template>
<polymer-element>

<polymer-element name="help-icon">
    <template>
        <span class="help">
            <img src="/image/help.png" />
            <content></content>
        </span>
    </template>
<polymer-element>

• 供应商可能创建的每个元素都以其名称作为前缀，这真的有意义吗？例如，

---

我们是否应该将此对话转移到其他地方，因为我们似乎已经找到了我原始问题的答案？

HTML解析器只保留了几个标记，以实现类似的行为（如果它们不在某个父项下，则忽略它们）：

• /
  只能用作
  的子项

• 只能是

我的第一个问题是它是否需要成为一个组件。作文是一件好事：）如果它现在对你有用，它可能在其他地方也有用

为了使这项工作正常进行……我会像您在

站点标题中所做的那样。仅使用
选择
。其次，您可以在
domReady（）
中测试元素是哪个父元素的子元素：


聚合物（“帮助图标”{
domReady:function（）{
//帮助图标只能是站点横幅的父级。
//解开
如果（this.parentNode.localName=='site banner'）{
this.hidden=false；
}否则{
//this.remove（）；//可以选择将其从dom中删除。
}
}
});

演示：
谢谢。我在问题中添加了更多信息。
<polymer-element name="help-icon" hidden>
  <template>
    <content></content>
  </template>
  <script>
    Polymer('help-icon', {
      domReady: function() {
        // help-icon should only be a parent of site-banner.
        // Unhide
        if (this.parentNode.localName == 'site-banner') {
          this.hidden = false;
        } else {
          //this.remove(); // optionally remove it from the dom.
        }
      }
    });
  </script>
</polymer-element>