Intent to Ship: Autonomous Custom Elements
Dominic Cooney
Contact emails
domi...@chromium.org (eng), tjsa...@chromium.org (PM), dom...@chromium.org (standards)
Spec
Custom elements are part of the DOM and HTML specs. Domenic has prepared summary pages of deep links: DOM, HTML. Open issues: Web Components, DOM (pull requests, issues), HTML (issues)
TAG reviewed an earlier working draft. There were two concerns: First, monkey-patching DOM in the custom elements spec is "very bad"; now custom elements are part of the HTML and DOM specs. Second, custom element reactions firing when transitioning back from UA code to script was unclear and implicit; now these places are explicitly annotated with the CEReactions Web IDL attribute.
Summary
Custom elements let authors define their own kinds of elements. Authors can define their elements' properties and methods and respond when elements are created, moved in and out of an active document, or have their attributes changed. For example:
<my-tag my-attr="mumble"></my-tag>
<script>
class MyElement extends HTMLElement {
constructor() {
// set some instance properties
}
// "Reactions" when things happen in the DOM
connectedCallback() { /* start timers */ }
disconnectedCallback() { /* stop timers */ }
static get observedAttributes() { return ['my-attr']; }
attributeChangedCallback(name, old, value, ns) {
// reflect some attributes
}
// API on the element prototype, just like built-ins
doStuff() { /* go for launch */ }
}
// Tell the browser about our new tag
customElements.define('my-tag', MyElement);
// Use it!
document.createElement('my-tag').doStuff();
document.body.appendChild(new MyElement());
document.querySelector('my-tag[my-attr]').doStuff();
</script>
We shipped a version of custom elements in M33, however we have implemented a new API based on more feedback from authors and other browser vendors: window.customElements.{define, whenDefined, get} (What's new?) We would like to ship this in M54, however we are still putting the finishing touches on HTML Imports integration. Depending on how that goes we may defer shipping this until M55.
We will send a separate intent to deprecate and remove the old document.registerElement API (use counter. We won't deprecate this yet. Chrome and Firefox implemented this but only Chrome shipped it.)
Link to “Intent to Implement” blink-dev discussion
https://groups.google.com/a/chromium.org/d/msg/blink-dev/EDxhDZ-bPkQ/WEFFoWC9BQAJ
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Demo link
http://jsbin.com/nomiyalehi/1/edit?html,output
(* requires the Enable Experimental Web Platform Features flag)
Debuggability
Usual script debugging features work with custom elements v1, although we should add some tests.
Unhandled exceptions during custom element creation and callbacks are reported to the global onerror handler, per the spec (step 2.)
The API design is better than custom elements "v0": Developers can test whether a name is registered using customElements.get('x-foo')
Interoperability and Compatibility Risk
GOOD NEWS: Safari and Firefox are implementing this now. Edge says this is roadmap priority: medium. See the status entry for details.
GOOD NEWS: We are developing a W3C test suite we are upstreaming. It is currently in third_party/WebKit/LayoutTests/custom-elements/spec.
NOT SO GOOD NEWS: There's another kind of custom element which use an built-in element name. Customized built-in elements are typically used when a built-in element has other desirable semantics, for example, <template is="dom-repeat"> gets template's special parsing semantics; <input is="prime-number" type="number"> has special form submission semantics; etc.
Blink and FIrefox* are implementing customized built-in elements. Safari has indicated they will not implement customized built-in elements but that all other aspects should be interoperable (for example, here). We will send a separate intent to ship for customized built-in elements.
(* Based on dom/webidl/CustomElementsRegistry.idl implementing ElementRegistrationOptions, extends.)
OWP launch tracking bug
Entry on the feature dashboard
https://www.chromestatus.com/feature/4696261944934400
There is a separate entry for the original API we shipped in M33.
Dimitri Glazkov
Chris Harrelson
LGTM1.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
