0

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

例如，我创建了一个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>

现在这不是最实际的示例，但是，假设 thehelp-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>

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

4

1 回答 1

1

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

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

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

为了让这个工作......我会做你在site-header. 仅选择<help-icon>使用<content select="help-icon"></content>. 其次，您可以测试元素是 in 的子元素的父元素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

于 2014-06-12T01:39:32.117 回答