<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="my-parent.html">
<link rel="import" href="my-child.html">
</head>
<body>
<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>
<div id="result1"></div>
<div id="result2" style="color:red;">Please Wait...</div>
<div id="result3"></div>
<div id="result4"></div>
</body>
</html>
<link rel="import"
href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">
<dom-module id="my-parent">
<template>
<content id="myContent" select="span"></content><!--filter elements using select tag-->
</template>
<script>
Polymer({
is: "my-parent",
ready: 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;
var distributed = this.getContentChildren('#myContent');//get children of content
console.log(distributed);//show all spans
}
});
</script>
</dom-module>
<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">
<dom-module id="my-child">
<template>
<content></content>
</template>
<script>
Polymer({
is: "my-child",
extends: 'span'
});
</script>
</dom-module>