隔离聚合物自定义元素以用于其他自定义元素

Question

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

例如，我创建了一个site-heading 和一个help-icon 元素。

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

现在这不是最实际的例子，但是，假设help-icon 是一个高度专业化的元素，仅在site-heading 的上下文中才有意义。 如何强制该元素仅在 site-heading 内部使用？

耶！

<site-heading>
    Super Cool Site Header
    <help-icon>Help Me!</help-icon>
</site-heading>

不！

<help-icon>Help Me!</help-icon>

---

更新 2：@ebdel

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

假设供应商将创建一个可交付的 Web 组件。例如，SoundCloud 将创建一个 <soundcloud-player> 元素。玩家需要一个曲目列表，因此他们创建了一个<track-info attributes="track-id crop etc">{{HTML for description pane}}</track-info> 元素。

<track-info> 元素仅作为<soundcloud-player> 的子元素有用：

• 目前，理论上 <track-info> 完全没问题，直到新的 Web 组件定义了 <track-info> 元素。

• 供应商可能创建的每个元素都以他们的名称为前缀真的有意义吗？ IE。 <soundcloud-track-info>

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

Answer 1

HTML 解析器只保留几个标签来表现这种行为（如果它们不在某个父级之下，它们将被忽略）：

• <option>/<optgroup> 只能用作<select> 的子级。
• <tr> 只能是 <table> 的孩子
• others

我的第一个问题是help-icon 是否需要成为一个组件。组合是个好东西 :) 如果它现在对你有用，它可能在其他地方也有用。

为了让这个工作......我会做你在site-header所做的事情。仅使用<content select="help-icon"></content> 选择<help-icon>。其次，您可以在domReady() 中测试该元素是哪个父元素的子元素：

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

演示：http://jsbin.com/dazewiqa/1/edit