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