| OLD | NEW |
| 1 # Custom Elements | 1 # Custom Elements |
| 2 | 2 |
| 3 Custom elements let authors create their own elements, with their own | 3 Custom elements let authors create their own elements, with their own |
| 4 methods, behavior, and attribute handling. Custom elements shipped in | 4 methods, behavior, and attribute handling. Custom elements shipped in |
| 5 M33. We colloquially refer to that version as "v0." | 5 M33. We colloquially refer to that version as "v0." |
| 6 | 6 |
| 7 Contact Dominic Cooney | 7 Contact [dom-dev@chromium.org](mailto:dom-dev@chromium.org) with |
| 8 ([dominicc@chromium.org](mailto:dominicc@chromium.org)) with | |
| 9 questions. | 8 questions. |
| 10 | 9 |
| 11 ### Code Location | 10 ### Code Location |
| 12 | 11 |
| 13 The custom elements implementation is split between core/dom and | 12 The custom elements implementation is split between core/dom and |
| 14 bindings/core/v8. | 13 bindings/core/v8. |
| 15 | 14 |
| 16 ## Design | 15 ## Design |
| 17 | 16 |
| 18 ### Some Important Classes | 17 ### Some Important Classes |
| 19 | 18 |
| 20 ###### CustomElementDefinition | 19 ###### CustomElementDefinition |
| 21 | 20 |
| 22 The definition of one ‘class’ of element. This type is | 21 The definition of one ‘class’ of element. This type is |
| 23 abstract to permit different kinds of definitions, although at the | 22 abstract to permit different kinds of definitions, although at the |
| 24 moment there is only one: ScriptCustomElementDefinition. | 23 moment there is only one: ScriptCustomElementDefinition. |
| 25 | 24 |
| 26 ScriptCustomElementDefinition is linked to its constructor by an ID | 25 ###### ScriptCustomElementDefinition |
| 27 number. The ID number is stored in a map, keyed by constructor, in a | 26 |
| 28 hidden value of the CustomElementRegistry wrapper. The ID is an index | 27 A constructor and its callbacks. To go from a custom element |
| 29 into a list of definitions stored in V8PerContextData. | 28 definition to a constructor, just access the member. |
| 29 |
| 30 Mapping a constructor back to a definition is more complicated because |
| 31 the same constructor could be defined as a custom element in different |
| 32 contexts. Each context has its own v8::Private that's a key to the |
| 33 property on the constructor; the value is an index into the table of |
| 34 definitions in the custom element registry. |
| 30 | 35 |
| 31 ###### CustomElementDescriptor | 36 ###### CustomElementDescriptor |
| 32 | 37 |
| 33 A tuple of local name, and custom element name. For autonomous custom | 38 A tuple of local name, and custom element name. For autonomous custom |
| 34 elements, these strings are the same; for customized built-in elements | 39 elements, these strings are the same; for customized built-in elements |
| 35 these strings will be different. In that case, the local name is the | 40 these strings will be different. In that case, the local name is the |
| 36 element's tag name and the custom element name is related to the value | 41 element's local name and the custom element name is related to the |
| 37 of the “is” attribute. | 42 value of the “is” attribute. |
| 38 | 43 |
| 39 ###### CustomElementRegistry | 44 ###### CustomElementRegistry |
| 40 | 45 |
| 41 Implements the `window.customElements` property. This maintains the | 46 Implements the `window.customElements` property. This maintains the |
| 42 set of registered names. The wrapper of this object is used by | 47 set of registered names and a list of registered definitions. |
| 43 ScriptCustomElementDefinition to cache state in V8. | |
| 44 | 48 |
| 45 ###### V8HTMLElement Constructor | 49 ###### V8HTMLElementConstructor |
| 46 | 50 |
| 47 The `HTMLElement` interface constructor. When a custom element is | 51 The `HTMLElement` interface constructor. When a custom element is |
| 48 created from JavaScript all we have to go on is the constructor (in | 52 created from JavaScript all we have to go on is the constructor (in |
| 49 `new.target`); this uses ScriptCustomElementDefinition's state to find | 53 `new.target`); this uses the context to map the constructor back to |
| 50 the definition to use. | 54 its definition as described in ScriptCustomElementDefintion above. |
| 51 | |
| 52 ### Memory Management | |
| 53 | |
| 54 Once defined, custom element constructors and prototypes have to be | |
| 55 kept around indefinitely because they could be created in future by | |
| 56 the parser. On the other hand, we must not leak when a window can no | |
| 57 longer run script. | |
| 58 | |
| 59 We use a V8HiddenValue on the CustomElementRegistry wrapper which | |
| 60 points to a map that keeps constructors and prototypes alive. See | |
| 61 ScriptCustomElementDefinition. | |
| 62 | 55 |
| 63 ## Style Guide | 56 ## Style Guide |
| 64 | 57 |
| 65 In comments and prose, write custom elements, not Custom Elements, to | 58 In comments and prose, write custom elements, not Custom Elements, to |
| 66 match the HTML standard. | 59 match the HTML standard. |
| 67 | 60 |
| 68 Prefix type names with CustomElement (singular). | 61 Prefix type names with CustomElement (singular). |
| 69 | 62 |
| 70 ## Testing | 63 ## Testing |
| 71 | 64 |
| (...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 147 may remove it even sooner, if we have evidence that sites are using | 140 may remove it even sooner, if we have evidence that sites are using |
| 148 feature detection correctly. | 141 feature detection correctly. |
| 149 | 142 |
| 150 ## References | 143 ## References |
| 151 | 144 |
| 152 These have links to the parts of the DOM and HTML specs which define | 145 These have links to the parts of the DOM and HTML specs which define |
| 153 custom elements: | 146 custom elements: |
| 154 | 147 |
| 155 * [WHATWG DOM Wiki: Custom Elements](https://github.com/whatwg/dom/wiki#custom-e
lements) | 148 * [WHATWG DOM Wiki: Custom Elements](https://github.com/whatwg/dom/wiki#custom-e
lements) |
| 156 * [WHATWG HTML Wiki: Custom Elements](https://github.com/whatwg/html/wiki#custom
-elements) | 149 * [WHATWG HTML Wiki: Custom Elements](https://github.com/whatwg/html/wiki#custom
-elements) |
| OLD | NEW |