TPE DOM/Custom elements

Introduction

This project is to enable web authors to define and use new types of DOM elements in a document.

References:

• Custom Elements spec
• whatwg html wiki
• whatwg dom wiki
• blink-dev intent-to-implement
• Blink bugs
  • https://bugs.chromium.org/p/chromium/issues/detail?id=594918
• Safari bugs
  • https://bugs.webkit.org/show_bug.cgi?id=154907
  • https://bugs.webkit.org/show_bug.cgi?id=150225
  • https://bugs.webkit.org/show_bug.cgi?id=155108

Taipei Main Members

Engineers: Edgar Chen (main contact), John Dai

Meeting Minutes

Sync-up minutes

Roadmap

Summary

We are now at Stage 4, working on performance work, especially on the critical blocker from enabling this feature on Nightly.

• Estimated nightly version: 59
• Firefox dev-platform intent-to-implement

Details

[Stage 1] (completed)

1. Remove support of SVG-based custom element.
   • Bug: 1274505
2. Window interface
   • Separate control preference
   • Move mRegistry from document to window.customElements
   • Bugs: 1275833, 1275832, 1275838, 1275839
3. HTMLElement constructor
   • Support using ES6 classes
   • Construction stack
   • Bug: 1274159
4. Document interface
   • createElement, createElementNS
   • Bug: 1276579
5. window.customElements.define
   • Bug: 1275835

[Stage 2] (completed)

1. custom element upgrade reactions stack/queue
   • Upgrade reaction
2. Algorithm of creating an element
   • Spec: https://dom.spec.whatwg.org/#concept-create-element
   • Revise consumers (createElement[NS] and HTML parser accordingly
     • HTML parser: https://dxr.mozilla.org/mozilla-central/source/parser/html/nsHtml5TreeOperation.cpp#335

[Stage 3] (completed)

1. Callback reaction queue
2. Lifecycle callbacks
   • • sProcessingStack
     • EnqueueLifecycleCallback
   • connectedCallback
   • disconnectedCallback
   • attributeChangedCallback

[Stage 4] (WE'RE HERE)

1. Performance work
2. Enable on Nightly (estimated target 59)

[Stage 5]

1. Ride to train

[Stage 6 - Backlog]

1. Mutation algorithms (Shadow dom)
   • Spec:
     • https://dom.spec.whatwg.org/#mutation-algorithms
     • https://w3c.github.io/webcomponents/spec/custom/#dom-mutation-algorithms
2. CSS :define
3. Performance
4. Web-platform-tests

Project Dashboard

Meta Bugs

Full Query

ID	Summary	Priority	Status
889230	[meta] Implement Custom Elements (from Web Components)	P3	RESOLVED

1 Total; 0 Open (0%); 1 Resolved (100%); 0 Verified (0%);

1st Impl. Shipping Blocker: Performance issues (INPROGRESS)

Full Query

ID	Summary	Status	Target milestone	Resolution	Assigned to	Depends on	Blocks
1356761	Find a better capacity for custom element reactions stack and queues	RESOLVED	mozilla62	FIXED	smaug@mozilla.com		1396567
1392970	Consider having a reference of the CustomElementDefinition in the custom element itself	RESOLVED	mozilla58	FIXED	jessi3py@gmail.com		889230, 1396567, 1408828, 1410790
1392974	[CEReactions] operations should not cause noticeable slowdown if the documents don't have any custom element when custom element feature is enabled	RESOLVED	---	FIXED	echen@mozilla.com	1421544, 1422197	1396567, 1410536
1396573	When custom elements preference is on, creating a non-custom element via document.createElement() shouldn't have a noticeable slowdown	RESOLVED	---	FIXED	echen@mozilla.com	1419643	1396567
1396575	Track performance for creating an autonomous custom elements which doesn't match CE definition	RESOLVED	---	FIXED	nobody@mozilla.org	1430951	1396567
1410536	Enabling the dom.webcomponents.customelements.enabled pref causes some talos regressions (dromaeo_dom, maybe tabpaint)	RESOLVED	---	FIXED	echen@mozilla.com	1392974	889230, 1396567, 1406825
1414178	Find a better way instead of iterate the candidates array and remove the element from the array	RESOLVED	---	DUPLICATE	nobody@mozilla.org		1396567
1419643	Do not need to look up custom elements definition for a non-custom element	RESOLVED	mozilla59	FIXED	echen@mozilla.com		1396567, 1396573
1419660	Track performance for creating a built-in custom elements doesn't match CE definition	RESOLVED	---	DUPLICATE	nobody@mozilla.org		1396567
1419661	When custom elements preference is on, createElement with define() call and it'll run upgrade which is much slower than what we have now	RESOLVED	mozilla63	FIXED	smaug@mozilla.com	1420178, 1428784, 1440382, 1469446, 1470191	1396567
1420377	Avoid atomize 'is' value twice when the custom element is created from parser	RESOLVED	mozilla59	FIXED	echen@mozilla.com		1396567
1430951	Avoid element name atomizing to improve performance of LookupCustomElementDefinition	RESOLVED	mozilla60	FIXED	echen@mozilla.com		1396567, 1396575

12 Total; 0 Open (0%); 12 Resolved (100%); 0 Verified (0%);

Post 1st Ship: Stage_4 Bugs & Progress (BACKLOG)

Full Query

ID	Summary	Status	Target milestone	Resolution	Assigned to	Depends on	Blocks
1326028	customElements.define must upgrade custom element in shadow-including tree order	RESOLVED	mozilla61	FIXED	mrbkap@gmail.com		889230, 1419323
1331334	Implement :defined pseudo-class for custom elements	RESOLVED	mozilla63	FIXED	smaug@mozilla.com	1299363, 1301024, 1417829	889230, 1471871
1331341	Enqueue custom element upgrade/callbacks reactions in shadow-including tree order when inserting/removing a node	RESOLVED	---	DUPLICATE	nobody@mozilla.org		889230

3 Total; 0 Open (0%); 3 Resolved (100%); 0 Verified (0%);

What Have Been DONE

1st Impl. Shipping Blocker: Stage_1 Bugs & Progress (DONE)

Full Query

ID	Summary	Status	Target milestone	Resolution	Assigned to	Depends on	Blocks
1274159	Add [HTMLConstructor] to support custom element feature	RESOLVED	mozilla53	FIXED	echen@mozilla.com	1275835	889230, 1287348, 1301024, 1317658
1274505	Remove support of SVG-based custom element	RESOLVED	mozilla50	FIXED	jdai@mozilla.com		889230, 1276579, 1396765
1275832	Implement custom element name validation for custom element	RESOLVED	mozilla52	FIXED	jdai@mozilla.com		889230, 1275835, 1275839
1275833	Add CustomElementsRegistry interface for custom element	RESOLVED	mozilla50	FIXED	jdai@mozilla.com	1289872	889230, 1275835, 1275838, 1275839
1275835	Implement CustomElementsRegistry define function	RESOLVED	mozilla51	FIXED	echen@mozilla.com	1275832, 1275833	889230, 1274159, 1275838, 1275839
1275838	Implement CustomElementsRegistry get function	RESOLVED	mozilla52	FIXED	jdai@mozilla.com	1275833, 1275835	889230
1275839	Implement CustomElementsRegistry whenDefined function	RESOLVED	mozilla52	FIXED	jdai@mozilla.com	1275832, 1275833, 1275835	889230
1276579	Revise document.createElement[NS] for custom elements	RESOLVED	mozilla50	FIXED	yrliou@gmail.com	1274505, 1294100, 1318630, 1338889	889230, 1276240
1288306	Disable custom elements web-platform v0 tests	RESOLVED	mozilla50	FIXED	echen@mozilla.com		889230, 1396765
1294100	TypeError: Argument 2 of Document.createElement can't be converted to a dictionary.	VERIFIED	mozilla51	FIXED	jdai@mozilla.com		889230, 1276579
1309140	Rename CustomElementsRegistry to CustomElementRegistry	RESOLVED	mozilla52	FIXED	jdai@mozilla.com		889230
1341693	Crash [@mozilla::dom::WindowBinding::get_customElements]	RESOLVED	mozilla54	FIXED	echen@mozilla.com		1340565, 889230

12 Total; 0 Open (0%); 11 Resolved (91.67%); 1 Verified (8.33%);

1st Impl. Shipping Blocker: Stage_2 Bugs & Progress (IN PROGRESS)

Full Query

ID	Summary	Status	Target milestone	Resolution	Assigned to	Depends on	Blocks
1287348	Implement construction stack for upgrading an element	RESOLVED	---	DUPLICATE	echen@mozilla.com	1274159	889230
1299363	Implement custom element v1 upgrade algorithm	RESOLVED	mozilla57	FIXED	jdai@mozilla.com	1325279, 1353647, 1359346	889230, 1301024, 1319342, 1331334, 1378079
1301024	Creating an custom element via createElement/createElementNS should call constructor or run upgrade steps	RESOLVED	mozilla58	FIXED	jdai@mozilla.com	1274159, 1299363, 1354013, 1407669, 1411088	889230, 1331334, 1396761
1309147	Add [CEReactions] to support custom element reactions	RESOLVED	mozilla55	FIXED	jdai@mozilla.com	1347446	889230, 1315885, 1340027
1309176	Add stack-of-queues system for custom element reaction	RESOLVED	---	DUPLICATE	jdai@mozilla.com		889230
1309184	Implement upgrade reaction for custom element reactions	RESOLVED	mozilla53	FIXED	jdai@mozilla.com		889230, 1319342, 1325279
1319342	Cloning a node runs concept-create-element steps with synchronous-custom-elements-flag unset which enqueues an upgrade reaction	RESOLVED	mozilla58	FIXED	jdai@mozilla.com	1299363, 1309184	889230
1325279	Put the reaction queue in CustomElementData structure instead of using a map	RESOLVED	mozilla55	FIXED	echen@mozilla.com	1309184, 1359346	889230, 1299363, 1315885
1347446	Move custom element reactions stack to DocGroup	RESOLVED	mozilla55	FIXED	jdai@mozilla.com	1350960	889230, 1309147, 1315885
1354013	Creating customized built-in elements without relevant definitions registered first shouldn't throw NotFoundError	RESOLVED	mozilla55	FIXED	echen@mozilla.com		889230, 1301024
1357002	Calling document.createElement() with a second arg that includes "is" should not have noticeable slowdown when custom elements feature is pref-ed off	RESOLVED	mozilla55	FIXED	echen@mozilla.com		889230
1359346	Implement custom element state	RESOLVED	mozilla55	FIXED	echen@mozilla.com		889230, 1299363, 1325279
1378079	Creating an custom element from parser will synchronously call constructor	RESOLVED	mozilla58	FIXED	jessi3py@gmail.com	1299363, 1411088, 1510114	889230, 1418002
1406297	Document.createElement must report an exception which is user defined thrown by a custom element constructor	RESOLVED	mozilla58	FIXED	jdai@mozilla.com		889230
1406325	Custom element clone node without definition should put into candidate map in order to upgrade later	RESOLVED	mozilla59	FIXED	jdai@mozilla.com		889230

15 Total; 0 Open (0%); 15 Resolved (100%); 0 Verified (0%);

1st Impl. Shipping Blocker: Stage_3 Bugs & Progress (DONE)

Full Query

ID	Summary	Status	Target milestone	Resolution	Assigned to	Depends on	Blocks
1121994	Implement adopted callback for custom elements	RESOLVED	mozilla58	FIXED	jdai@mozilla.com		889230, 1293921
1315885	Implement callback reaction for custom element reactions	RESOLVED	mozilla56	FIXED	jdai@mozilla.com	1309147, 1325279, 1347446	889230, 1293921, 1379573
1334043	Implement connected lifecycle callbacks for custom elements	RESOLVED	mozilla58	FIXED	jessi3py@gmail.com		889230, 1293921, 1387125
1334044	Implement disconnected lifecycle callbacks for custom elements	RESOLVED	mozilla58	FIXED	jessi3py@gmail.com		889230, 1293921
1334051	Implement list of observed attributes for custom elements' attributeChanged callbacks	RESOLVED	mozilla57	FIXED	jessi3py@gmail.com		889230, 1293921
1340027	Add annotation with the [CEReactions] attribute	RESOLVED	mozilla56	FIXED	jdai@mozilla.com	1293921, 1309147	889230
1392970	Consider having a reference of the CustomElementDefinition in the custom element itself	RESOLVED	mozilla58	FIXED	jessi3py@gmail.com		889230, 1396567, 1408828, 1410790

7 Total; 0 Open (0%); 7 Resolved (100%); 0 Verified (0%);