Question

请参阅此plunk

  <my-parent id="parent">
    <span id='1'>"Some Text"</span>
    <span id='2'>"Some Text"</span>
    <span id='3'>"Some Text"</span>
    <span id='4'>"Some Text"</span>
  </my-parent>

在我父母创建的回调:: -

中

Polymer.dom(this).querySelectorAll('span').length   ==>  4 

Polymer.dom(this).querySelectorAll(':scope > span').length   ==> 0 ???

:scope选择器不适用于Polymer.dom的querySelector？

Answer 1

我使用了你的元素，这有效：

<dom-module id="my-parent">

  <template>
    <content id="myContent" select="span"></content><!--filter elements using select tag-->
  </template>

  <script>
    Polymer({
      is: "my-parent",
      created: function() {//I think created function is from Polymer 0.5, Im not sure if is correct to use in Polymer 1.0
        var result1 = document.getElementById("result1");
        var result2 = document.getElementById("result2");
        var result3 = document.getElementById("result3");
        var result4 = document.getElementById("result4");

        result1.textContent = "Selector used [Polymer.dom(this)]:: 'span'  --> " + Polymer.dom(this).querySelectorAll('span').length;

        result2.textContent = "Selector used [Polymer.dom(this)]:: ':scope > span'  --> " + Polymer.dom(this).querySelectorAll(':scope > span').length;

        result3.textContent = "Selector used [this]:: 'span'  --> " + this.querySelectorAll('span').length;
        result4.textContent = "Selector used [this]:: ':scope > span'  --> " + this.querySelectorAll(':scope > span').length;


      },
      ready: function(){
        var distributed = this.getContentChildren('#myContent');//get children of content
        console.log(distributed);//show all spans
      }
    });
  </script>

</dom-module>

Here您可以找到有关此主题的说明。

Polymer.dom：dom-elements的范围查询选择器

1 个答案: