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 |