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：@ebidel

似乎这种关系并不是真的支持，甚至可能不在规范中。这是一个现实世界的案例，我认为应该考虑范围（孤立的？）元素来加权。

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

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

目前，理论上<track-info>完全正常，直到新的网络组件定义了<track-info>元素。
供应商可能创建的每个元素都以其名称为前缀，这是否真的有意义？即。 <soundcloud-track-info>

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

Answer 1

HTML解析器只保留一些标记，表现得像这样（如果它们不属于某个父母，则会被忽略）：

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

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

要使这项工作......我会在site-header做你所做的。仅使用<help-icon>选择<content select="help-icon"></content>。其次，您可以在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

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

耶！

不然！

1 个答案: