<!DOCTYPE html>
<title>Custom Elements: defineElement</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry">
<meta name="author" title="Dominic Cooney" href="mailto:[email protected]">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>
// TODO(dominicc): Merge these tests with
// https://github.com/web-platform-tests/wpt/pull/2940
'use strict';
test_with_window((w) => {
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', 42);
}, 'defining a number "constructor" should throw a TypeError');
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', () => {});
}, 'defining an arrow function "constructor" should throw a TypeError');
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', { m() {} }.m);
}, 'defining a concise method "constructor" should throw a TypeError');
}, 'A "constructor" that is not a constructor');
test_with_window((w) => {
// https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
let invalid_names = [
'annotation-xml',
'color-profile',
'font-face',
'font-face-src',
'font-face-uri',
'font-face-format',
'font-face-name',
'missing-glyph',
'div', 'p',
'nothtmlbutnohyphen',
'-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z',
'intermediate-UPPERCASE-letters',
'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7',
'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e',
'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0',
'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef',
'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000)
];
class X extends w.HTMLElement {}
invalid_names.forEach((name) => {
assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
w.customElements.define(name, X);
})
});
}, 'Invalid names');
test_with_window((w) => {
class X extends w.HTMLElement {}
class Y extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws_dom('NotSupportedError', w.DOMException, () => {
w.customElements.define('a-a', Y);
}, 'defining an element with a name that is already defined should throw ' +
'a NotSupportedError');
}, 'Duplicate name');
test_with_window((w) => {
class Y extends w.HTMLElement {}
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom('NotSupportedError', w.DOMException, () => {
w.customElements.define('a-a', Y);
}, 'defining an element with a name that is being defined should ' +
'throw a NotSupportedError');
return {};
}
});
w.customElements.define('a-a', X);
assert_equals(w.customElements.get('a-a'), X, 'the first definition should have worked');
}, 'Duplicate name defined recursively');
test_with_window((w) => {
class X extends w.HTMLElement {}
w.customElements.define('a-a', X);
assert_throws_dom('NotSupportedError', w.DOMException, () => {
w.customElements.define('a-b', X);
}, 'defining an element with a constructor that is already in the ' +
'registry should throw a NotSupportedError');
}, 'Reused constructor');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
class X extends w2.HTMLElement { };
w1.customElements.define('first-name', X);
w2.customElements.define('second-name', X);
assert_equals(
new X().localName, 'second-name',
'the current global object should determine which definition is ' +
'operative; because X extends w2.HTMLElement, w2 is operative');
});
}, 'HTMLElement constructor looks up definitions in the current global-' +
'reused constructor');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
class X extends w2.HTMLElement { };
w1.customElements.define('x-x', X);
assert_throws_js(
w2.TypeError, () => new X(),
'the current global object (w2) should not find the definition in w1');
});
}, 'HTMLElement constructor looks up definitions in the current global');
test_with_window((w) => {
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom('NotSupportedError', w.DOMException, () => {
w.customElements.define('second-name', X);
}, 'defining an element with a constructor that is being defined ' +
'should throw a NotSupportedError');
return {};
}
});
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('first-name'), X, 'the first definition should have worked');
}, 'Reused constructor recursively');
test_with_window((w) => {
let X = (function () {}).bind({});
Object.defineProperty(X, 'prototype', {
get() {
assert_throws_dom('NotSupportedError', w.DOMException, () => {
w.customElements.define('second-name', class extends HTMLElement { });
}, 'defining an element while element definition is running should ' +
'throw a NotSupportedError');
return {};
}
});
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('first-name'), X,
'the first definition should have worked');
}, 'Define while element definition is running');
promise_test((t) => {
return Promise.all([create_window_in_test(t), create_window_in_test(t)])
.then(([w1, w2]) => {
let X = (function () {}).bind({});
class Y extends w2.HTMLElement { };
Object.defineProperty(X, 'prototype', {
get() {
w2.customElements.define('second-name', Y);
return {};
}
});
w1.customElements.define('first-name', X);
assert_equals(w1.customElements.get('first-name'), X,
'the first definition should have worked');
assert_equals(w2.customElements.get('second-name'), Y,
'the second definition should have worked, too');
});
}, 'Define while element definition is running in a separate registry');
test_with_window((w) => {
class Y extends w.HTMLElement { };
class X extends w.HTMLElement {
constructor() {
super();
w.customElements.define('second-name', Y);
}
};
// the element definition flag while first-name is processed should
// be reset before doing upgrades
w.customElements.define('first-name', X);
assert_equals(w.customElements.get('second-name'), Y,
'the second definition should have worked');
}, 'Element definition flag resets before upgrades',
'<first-name></first-name>');
test_with_window((w) => {
assert_throws_js(w.TypeError, () => {
let not_a_constructor = () => {};
let invalid_name = 'annotation-xml';
w.customElements.define(invalid_name, not_a_constructor);
}, 'defining an element with an invalid name and invalid constructor ' +
'should throw a TypeError for the constructor and not a SyntaxError');
class C extends w.HTMLElement {}
w.customElements.define('a-a', C);
assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
let invalid_name = 'annotation-xml';
let reused_constructor = C;
w.customElements.define(invalid_name, reused_constructor);
}, 'defining an element with an invalid name and a reused constructor ' +
'should throw a SyntaxError for the name and not a NotSupportedError');
}, 'Order of checks');
test_with_window((w) => {
let doc = w.document;
doc.body.innerHTML = `
<a-a id="a">
<p>
<a-a id="b"></a-a>
<a-a id="c"></a-a>
</p>
<a-a id="d"></a-a>
</a-a>`;
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id),
'four elements should have been upgraded in doc order');
}, 'Upgrade: existing elements');
test_with_window((w) => {
let doc = w.document;
let a = doc.createElement('a-a');
doc.body.appendChild(a);
assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a),
'the undefined autonomous element should be a HTMLElement');
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
assert_equals(C.prototype, Object.getPrototypeOf(a),
'the HTMLElement constructor should set the prototype ' +
'to the defined prototype');
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals([a], invocations,
'the constructor should have been invoked for the in-' +
'document element');
}, 'Upgrade: sets prototype of existing elements');
test_with_window((w) => {
let doc = w.document;
var shadow = doc.body.attachShadow({mode: 'open'});
let a = doc.createElement('a-a');
shadow.appendChild(a);
let invocations = [];
class C extends w.HTMLElement {
constructor() {
super();
invocations.push(this);
}
}
w.customElements.define('a-a', C);
assert_array_equals([a], invocations,
'the constructor should have been invoked once for the ' +
'elements in the shadow tree');
}, 'Upgrade: shadow tree');
// Final step in Step 14
// 14. Finally, if the first set of steps threw an exception, then rethrow that exception,
// and terminate this algorithm.
test_with_window((w) => {
class Y extends w.HTMLElement {}
let X = (function () {}).bind({});
let exception = { name: 42 };
Object.defineProperty(X, 'prototype', {
get() { throw exception; }
});
assert_throws_exactly(exception, () => {
w.customElements.define('a-a', X);
}, 'should rethrow constructor exception');
w.customElements.define('a-a', Y);
assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');
}, 'If an exception is thrown, rethrow that exception and terminate the algorithm');
// 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
test_with_window((w) => {
let X = (function () {}).bind({});
let exception = {name: 'prototype throws' };
Object.defineProperty(X, 'prototype', {
get() { throw exception; }
});
assert_throws_exactly(exception, () => {
w.customElements.define('a-a', X);
}, 'Exception from Get(constructor, prototype) should be rethrown');
}, 'Rethrow any exceptions thrown while getting prototype');
// 14.2 If Type(prototype) is not Object, then throw a TypeError exception.
test_with_window((w) => {
function F() {}
F.prototype = 42;
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', F);
}, 'defining an element with a constructor with a prototype that is not an ' +
'object should throw a TypeError');
}, 'Retrieved prototype is a non-object');
// 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow any exceptions.
// 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Rethrow any exceptions.
// 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback"). Rethrow any exceptions.
// Note that this test implicitly tests order of callback retrievals.
// Callbacks are defined in reverse order.
let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback'];
function F_for_callbacks_in_reverse() {};
callbacks_in_reverse.forEach((callback) => {
test_with_window((w) => {
let exception = { name: callback };
Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, {
get() { throw exception; }
});
assert_throws_exactly(exception, () => {
w.customElements.define('a-a', F_for_callbacks_in_reverse);
}, 'Exception from Get(prototype, callback) should be rethrown');
}, 'Rethrow any exceptions thrown while retrieving ' + callback);
});
// 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false,
// then throw a TypeError exception.
// 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCallback) is false,
// then throw a TypeError exception.
// 14.9. If attributeChangedCallback is not undefined, then
// 1. If IsCallable(attributeChangedCallback) is false, then throw a TypeError exception.
callbacks_in_reverse.forEach((callback) => {
test_with_window((w) => {
function F() {}
Object.defineProperty(F.prototype, callback, {
get() { return {}; }
});
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', F);
}, 'defining an element with a constructor with a callback that is ' +
'not undefined and not callable should throw a TypeError');
}, 'If retrieved callback '+ callback + ' is not undefined and not callable, throw TypeError');
});
// 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes").
// Rethrow any exceptions.
test_with_window((w) => {
let exception = { name: 'observedAttributes throws' };
class X extends w.HTMLElement{
constructor() { super(); }
attributeChangedCallback() {}
static get observedAttributes() { throw exception; }
}
assert_throws_exactly(exception, () => {
w.customElements.define('a-a', X);
}, 'Exception from Get(constructor, observedAttributes) should be rethrown');
}, 'Rethrow any exceptions thrown while getting observedAttributes');
// 14.9.3 If observedAttributesIterable is not undefined, then set observedAttributes
// to the result of converting observedAttributesIterable to a sequence<DOMString>.
// Rethrow any exceptions.
test_with_window((w) => {
let invocations = [];
let element = w.document.createElement('a-a');
element.setAttribute('a', '1');
element.setAttribute('b', '2');
element.setAttribute('c', '3');
let constructor = function () {
return Reflect.construct(w.HTMLElement, [], constructor);
};
constructor.prototype.attributeChangedCallback = function () {
invocations.push(arguments[0]);
};
constructor.observedAttributes = {[Symbol.iterator]:
function* () {
yield 'a';
yield 'c';
}
};
w.customElements.define('a-a', constructor);
w.document.body.appendChild(element);
assert_array_equals(invocations, ['a', 'c'], 'attributeChangedCallback should be invoked twice: once for "a" and once for "c"');
}, 'ObservedAttributes are retrieved from iterators');
test_with_window((w) => {
let constructor = function () {};
constructor.prototype.attributeChangedCallback = function () { };
constructor.observedAttributes = {[Symbol.iterator]: 1};
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', constructor);
}, 'converting value that is not an object should throw TypeError');
}, 'Converting non-object observedAttributes to sequence<DOMString>');
test_with_window((w) => {
class X extends w.HTMLElement{
constructor() { super(); }
attributeChangedCallback() {}
static get observedAttributes() { return new RegExp(); }
}
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', X);
}, 'converting RegExp should throw TypeError');
}, 'Converting regular expression observedAttributes to sequence<DOMString>');
test_with_window((w) => {
let constructor = function () {};
constructor.prototype.attributeChangedCallback = function () { };
constructor.observedAttributes = {};
assert_throws_js(w.TypeError, () => {
w.customElements.define('a-a', constructor);
}, 'If iterator method is undefined, it should throw TypeError');
}, 'Converting observedAttributes without iterator method to sequence<DOMString>');
// 14.9.2 test Get(constructor, observedAttributes) does not throw if
// attributeChangedCallback is undefined.
test_with_window((w) => {
let observedAttributes_invoked = false;
let X = (function () {}).bind({});
Object.defineProperty(X, 'observedAttributes', {
get() { observedAttributes_invoked = true; }
});
assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes) should not be invoked');
}, 'Get(constructor, observedAttributes) should not execute if ' +
'attributeChangedCallback is undefined');
test_with_window((w) => {
let attributes = {};
attributes[Symbol.iterator] = function*() {
throw new TypeError();
};
class X extends w.HTMLElement {
constructor() { super(); }
attributeChangedCallback() {}
static get observedAttributes() {
return attributes;
}
}
assert_throws_js(TypeError, () => {
w.customElements.define('x-x', X);
});
}, 'Throwing an exception in observedAttributes');
</script>
</body>
Codebase Browser
chromium