| 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 Dominic Cooney |
| 8 ([dominicc@chromium.org](mailto:dominicc@chromium.org)) with | 8 ([dominicc@chromium.org](mailto:dominicc@chromium.org)) with |
| 9 questions. | 9 questions. |
| 10 | 10 |
| 11 ### Code Location |
| 12 |
| 13 The custom elements implementation is split between core/dom and |
| 14 bindings/core/v8. |
| 15 |
| 11 ## Design | 16 ## Design |
| 12 | 17 |
| 13 ### Some Important Classes | 18 ### Some Important Classes |
| 14 | 19 |
| 15 ###### CustomElementDefinition | 20 ###### CustomElementDefinition |
| 16 | 21 |
| 17 The definition of one ‘class’ of element; it consists of a | 22 The definition of one ‘class’ of element. This type is |
| 18 tag name, and a prototype. | 23 abstract to permit different kinds of definitions, although at the |
| 24 moment there is only one: ScriptCustomElementDefinition. |
| 25 |
| 26 ScriptCustomElementDefinition is linked to its constructor by an ID |
| 27 number. The ID number is stored in a map, keyed by constructor, in a |
| 28 hidden value of the CustomElementsRegistry wrapper. The ID is an index |
| 29 into a list of definitions stored in V8PerContextData. |
| 30 |
| 31 ###### CustomElementDescriptor |
| 32 |
| 33 A tuple of local name, and custom element name. For autonomous custom |
| 34 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 |
| 36 element's tag name and the custom element name is related to the value |
| 37 of the “is” attribute. |
| 19 | 38 |
| 20 ###### CustomElementsRegistry | 39 ###### CustomElementsRegistry |
| 21 | 40 |
| 22 Implements the `window.customElements` property. This maintains a list | 41 Implements the `window.customElements` property. This maintains the |
| 23 of definitions, and a mapping from constructors to an index in this | 42 set of registered names. The wrapper of this object is used by |
| 24 list. The same map also has indexes as keys and prototypes as values. | 43 ScriptCustomElementDefinition to cache state in V8. |
| 25 | 44 |
| 26 ###### V8HTMLElement Constructor | 45 ###### V8HTMLElement Constructor |
| 27 | 46 |
| 28 The `HTMLElement` interface constructor. When a custom element is | 47 The `HTMLElement` interface constructor. When a custom element is |
| 29 created from JavaScript all we have to go on is the constructor (in | 48 created from JavaScript all we have to go on is the constructor (in |
| 30 `new.target`); this uses CustomElementRegistry’s map to find | 49 `new.target`); this uses ScriptCustomElementDefinition's state to find |
| 31 which definition and prototype to use. | 50 the definition to use. |
| 32 | 51 |
| 33 ### Memory Management | 52 ### Memory Management |
| 34 | 53 |
| 35 Once defined, custom element constructors and prototypes have to be | 54 Once defined, custom element constructors and prototypes have to be |
| 36 kept around indefinitely because they could be created in future by | 55 kept around indefinitely because they could be created in future by |
| 37 the parser. On the other hand, we must not leak when a window can no | 56 the parser. On the other hand, we must not leak when a window can no |
| 38 longer run script. | 57 longer run script. |
| 39 | 58 |
| 40 We use a V8HiddenValue on the CustomElementsRegistry wrapper which | 59 We use a V8HiddenValue on the CustomElementsRegistry wrapper which |
| 41 points to a map that keeps constructors and prototypes alive. | 60 points to a map that keeps constructors and prototypes alive. See |
| 61 ScriptCustomElementDefinition. |
| 42 | 62 |
| 43 ## Style Guide | 63 ## Style Guide |
| 44 | 64 |
| 45 In comments and prose, write custom elements, not Custom Elements, to | 65 In comments and prose, write custom elements, not Custom Elements, to |
| 46 match the HTML standard. | 66 match the HTML standard. |
| 47 | 67 |
| 48 Prefix type names with CustomElement (singular). The one exception to | 68 Prefix type names with CustomElement (singular). The one exception to |
| 49 this rule is CustomElementsRegistry, which uses a plural to match the | 69 this rule is CustomElementsRegistry, which uses a plural to match the |
| 50 name of the interface in the specification. | 70 name of the interface in the specification. |
| 51 | 71 |
| (...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 129 may remove it even sooner, if we have evidence that sites are using | 149 may remove it even sooner, if we have evidence that sites are using |
| 130 feature detection correctly. | 150 feature detection correctly. |
| 131 | 151 |
| 132 ## References | 152 ## References |
| 133 | 153 |
| 134 These have links to the parts of the DOM and HTML specs which define | 154 These have links to the parts of the DOM and HTML specs which define |
| 135 custom elements: | 155 custom elements: |
| 136 | 156 |
| 137 * [WHATWG DOM Wiki: Custom Elements](https://github.com/whatwg/dom/wiki#custom-e
lements) | 157 * [WHATWG DOM Wiki: Custom Elements](https://github.com/whatwg/dom/wiki#custom-e
lements) |
| 138 * [WHATWG HTML Wiki: Custom Elements](https://github.com/whatwg/html/wiki#custom
-elements) | 158 * [WHATWG HTML Wiki: Custom Elements](https://github.com/whatwg/html/wiki#custom
-elements) |
| OLD | NEW |