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>

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>現在、新しい Web コンポーネントが要素を定義するまでは、理論上はまったく問題あり<track-info>ません。

  • ベンダーが作成する可能性のあるすべての要素にその名前のプレフィックスを付けるのは本当に理にかなっていますか? すなわち。<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 に答える