2 
<!-- my-poly -->
<template>
  <content select=".useBtn">
    <button id="defaultBtn">
      <content select=".useBtnIcon">
        Button
      </content>
    </button>
  </content>
</template>

したがって、私の要素が使用されると、ユーザーは の代わりに表示されるボタンを入力できますdefaultBtn。ただし、ボタンが指定されていない場合はdefaultBtn、ボタン テキストを含む が表示されます。defaultBtnただし、ユーザーには、ボタンに表示されるテキストまたはアイコンを使用して入力するオプションも必要です。

a を使用する<div class="useBtn"></div>と、ボタンとして使用されます。しかし、<div class="useBtnIcon"> BtnText</div>うまくいかないようです。これを機能させる方法はありますか？

4

3 に答える 3

1

仕様によると、それは動作しません。

http://www.w3.org/TR/shadow-dom/#content-insertion-points

次の条件をすべて満たすコンテンツ要素は、コンテンツ挿入ポイントを表します。

  • コンテンツ要素のルート ノードはシャドウ ルートです
  • content 要素の祖先に他の content 要素がない
  • content 要素の祖先に shadow 要素がない

これを念頭に置いて、ネストされたコンテンツ要素でこれを機能させることはできないと思います。

これはうまくいきます。両方が適用された場合、カスタム アイコンが勝ちます

<polymer-element name="the-button">
    <template>

        <content id="contentButton" select=".useBtn">
            <button id="PREFIXEDdefaultBtn">
                Default Button
            </button>
        </content>

        <button id="defaultBtnWithCustomIcon">
            <!--be sure that this content element doesnt contain a default set -->
            <content id="contentIcon" select=".useBtnIcon"></content>
        </button>

    </template>

    <script>
        Polymer('the-button', {
            domReady: function () {
                var customIcon = this.$.contentIcon;

                var disNodes = customIcon.getDistributedNodes();
                //Test if the content element contains distributed nodes.
                if (disNodes.length !== 0) {
                    this.$.contentButton.remove();
                } else {
                    // the button is customized, remove the icon
                    this.$.defaultBtnWithCustomIcon.remove();
                }
            }
        });
    </script>
</polymer-element>
于 2014-12-11T18:31:28.987 に答える
0

外側の要素がそのコンテンツを選択すると、内側の<content>要素がパージされると確信しています。<content>

于 2014-11-26T13:05:17.880 に答える