@webcomponents/custom-elements
Version:
HTML Custom Elements Polyfill
54 lines (42 loc) • 1.59 kB
HTML
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<link id="import1" rel="import" href="resources/attribute-upgrade.html">
<script>;
let reactions = [];
customElements.define('a-a', class extends HTMLElement {
static get observedAttributes() { return ['attr']; }
attributeChangedCallback() {
reactions.push(this);
}
});
</script>
<link id="import2" rel="import" href="resources/attribute-parsercreate.html">
<script>;
test(() => {
let importDoc1 = import1.import;
let importDoc2 = import2.import;
let a = importDoc1.querySelector('#a');
let b = importDoc1.querySelector('#b');
let c = importDoc2.querySelector('#c');
let d = importDoc2.querySelector('#d');
assert_array_equals(reactions, [b, d],
'attributeChangedCallback should be called for both upgrade and create.');
reactions = [];
a.setAttribute('attr', 'a');
b.setAttribute('attr', 'b');
c.setAttribute('attr', 'c');
d.setAttribute('attr', 'd');
assert_array_equals(reactions, [a, b, c, d],
'attributeChangedCallback should be called for setAttribute().');
reactions = [];
d.removeAttribute('attr', 'd');
c.removeAttribute('attr', 'c');
b.removeAttribute('attr', 'b');
a.removeAttribute('attr', 'a');
assert_array_equals(reactions, [d, c, b, a],
'attributeChangedCallback should be called for removeAttribute().');
}, 'attributeChangedCallback should be invoked for elements in import');
</script>