Polymer.dom:dom元素的作用域查询选择器

Polymer.dom :scope query selector for dom-elements

本文关键字：dom 查询 选择器 作用域 元素 Polymer      更新时间：2023-09-26

查看此弹出

  <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？

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

<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>

在这里你可以找到关于这个主题的解释。

相关文章：