mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
126 lines
3.0 KiB
HTML
126 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>polymer</title>
|
|
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
<link rel="import" href="../../polymer.html">
|
|
</head>
|
|
<body>
|
|
|
|
<x-outer></x-outer>
|
|
|
|
<dom-module id="x-outer">
|
|
<template>
|
|
<!-- <template is="dom-repeat" items="{{items}}"><div item>{{item}}</div></template> -->
|
|
<x-inner><div item>A</div><div item>B</div><div item>C</div></x-inner>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-inner">
|
|
<style>
|
|
.one, .two {
|
|
display: block;
|
|
border: 2px solid orange;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.two {
|
|
border-color: green;
|
|
}
|
|
</style>
|
|
<template>
|
|
<x-inner-most class="one"><content class="item" select="[item]"></content></x-inner-most>
|
|
|
|
<x-inner-most class="two"><content class="notItem" select=":not([item])"></content></x-inner-most>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="x-inner-most">
|
|
<template>
|
|
<div style="background-color: green;">
|
|
<content class="test" select="[test]"></content>
|
|
</div>
|
|
<div style="background-color: red;">
|
|
<content class="notTest" select=":not([test])"></content>
|
|
</div>
|
|
<br>
|
|
<button on-click="_onTest1a">[test]:not[item]</button>
|
|
<button on-click="_onTest2a">:not[test][item]</button>
|
|
<button on-click="_onTest1b">auto: [test]:not[item]</button>
|
|
<button on-click="_onTest2b">auto: :not[test][item]</button>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
(function() {
|
|
HTMLImports.whenReady(function() {
|
|
Polymer({
|
|
is: 'x-outer',
|
|
properties: {
|
|
items: {
|
|
type: Array,
|
|
value: ["A", "B", "C"]
|
|
}
|
|
}
|
|
});
|
|
|
|
Polymer({
|
|
is: 'x-inner'
|
|
});
|
|
|
|
var element;
|
|
|
|
Polymer({
|
|
is: 'x-inner-most',
|
|
|
|
_onTest1a: function() {
|
|
this.doTest(function(e) {
|
|
e.setAttribute('test', '');
|
|
e.removeAttribute('item');
|
|
this.distributeContent();
|
|
});
|
|
},
|
|
|
|
_onTest1b: function() {
|
|
this.doTest(function(e) {
|
|
Polymer.dom(e).setAttribute('test', '');
|
|
Polymer.dom(e).removeAttribute('item');
|
|
});
|
|
},
|
|
|
|
_onTest2a: function() {
|
|
this.doTest(function(e) {
|
|
e.setAttribute('item', '');
|
|
e.removeAttribute('test');
|
|
this.distributeContent();
|
|
});
|
|
},
|
|
|
|
_onTest2b: function() {
|
|
this.doTest(function(e) {
|
|
Polymer.dom(e).setAttribute('item', '');
|
|
Polymer.dom(e).removeAttribute('test');
|
|
});
|
|
},
|
|
|
|
doTest: function(work) {
|
|
element = element || document.querySelector("[item]");
|
|
console.group('test');
|
|
console.log('before', Polymer.dom(element).getDestinationInsertionPoints());
|
|
//
|
|
work.call(this, element);
|
|
Polymer.dom.flush();
|
|
//
|
|
console.log('after', Polymer.dom(element).getDestinationInsertionPoints());
|
|
console.groupEnd('test');
|
|
}
|
|
});
|
|
});
|
|
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|