| OLD | NEW |
| (Empty) | |
| 1 # Custom Elements |
| 2 |
| 3 Custom elements let authors create their own elements, with their own |
| 4 methods, behavior, and attribute handling. Custom elements shipped in |
| 5 M33. We colloquially refer to that version as "v0." |
| 6 |
| 7 Contact Dominic Cooney |
| 8 ([dominicc@chromium.org](mailto:dominicc@chromium.org)) with |
| 9 questions. |
| 10 |
| 11 ## Design |
| 12 |
| 13 TODO(dominicc): Write this. |
| 14 |
| 15 ## Style Guide |
| 16 |
| 17 In comments and prose, write custom elements, not Custom Elements, to |
| 18 match the HTML standard. |
| 19 |
| 20 Prefix type names with CustomElement (singular). The one exception to |
| 21 this rule is CustomElementsRegistry, which uses a plural to match the |
| 22 name of the interface in the specification. |
| 23 |
| 24 ## Testing |
| 25 |
| 26 Custom elements have small C++ unit tests and medium |
| 27 “layout” tests. |
| 28 |
| 29 ### C++ Unit Tests |
| 30 |
| 31 These are in third_party/WebKit/Source/core/dom/*Test.cpp and are |
| 32 built as part of the webkit_unit_tests target. The test names start |
| 33 with CustomElement so you can run them with: |
| 34 |
| 35 $ out/Debug/webkit_unit_tests --gtest_filter=CustomElement* |
| 36 |
| 37 ### Layout Tests |
| 38 |
| 39 The custom element layout tests are generally in |
| 40 third_party/WebKit/LayoutTests/custom-elements. |
| 41 |
| 42 All custom elements layout tests use the [W3C web-platform-tests |
| 43 harness](http://testthewebforward.org/docs/) and follow its style. The |
| 44 W3C is not very prescriptive, so be consistent with other custom |
| 45 elements tests. |
| 46 |
| 47 When naming tests, use short names describing what the test is doing. |
| 48 Avoid articles. For example, "HTMLElement constructor, invoke". When |
| 49 writing assertion messages, start with a lowercase letter (unless the |
| 50 word is a proper noun), use normal grammar and articles, and include |
| 51 the word “should” to leave no doubt whate the expected |
| 52 behavior is. |
| 53 |
| 54 ### Spec Tests |
| 55 |
| 56 These will be upstreamed to the W3C, replacing [the tests for |
| 57 registerElement](https://github.com/w3c/web-platform-tests/commits/master/custom
-elements) |
| 58 we contributed earlier. To facilitate that, follow these guidelines: |
| 59 |
| 60 * Keep the tests together in the `spec` directory. |
| 61 * Only test things required in a spec. The test should permit other |
| 62 possible reasonable implementations. |
| 63 * Avoid using Blink-specific test mechanisms. Don't use |
| 64 `window.internals` for example. |
| 65 |
| 66 ### Implementation Tests |
| 67 |
| 68 These are for testing Blink-specific details like object lifetimes, |
| 69 crash regressions, interaction with registerElement and HTML Imports, |
| 70 and so on. |
| 71 |
| 72 These tests can use Blink-specific testing hooks like |
| 73 `window.internals` and `testRunner`. |
| 74 |
| 75 ### Web Exposed Tests |
| 76 |
| 77 Finally there are /TODO(dominicc): should be/ tests in |
| 78 webexposed/custom-elements which assert that we HAVE NOT shipped |
| 79 `window.customElements.define` yet. These tests need to be updated |
| 80 when we ship `window.customElements.define` or remove |
| 81 `registerElement`. |
| 82 |
| 83 ## “V0” Deprecation |
| 84 |
| 85 The plan is to: |
| 86 |
| 87 1. Implement the ‘new’ kind of custom elements separately |
| 88 from the existing implementation. We have renamed all of old |
| 89 implementation so that the type names start with V0; it should be |
| 90 easy to tell whether you are looking at the old or new |
| 91 implementation. |
| 92 1. When we ship `window.customElements.define`, add a deprecation |
| 93 warning to `document.registerElement` directing authors to use the |
| 94 new API. |
| 95 1. Change the ‘web’ API to use the new kind of custom |
| 96 elements. That API is used by extensions to implement the webview |
| 97 tag and things like that. |
| 98 1. When [the use counter for |
| 99 registerElement](https://www.chromestatus.com/metrics/feature/timeline/popula
rity/457) |
| 100 drops below 0.03% of page loads, remove the old implementation. We |
| 101 may remove it even sooner, if we have evidence that sites are using |
| 102 feature detection correctly. |
| 103 |
| 104 ## References |
| 105 |
| 106 These have links to the parts of the DOM and HTML specs which define |
| 107 custom elements: |
| 108 |
| 109 * [WHATWG DOM Wiki: Custom Elements](https://github.com/whatwg/dom/wiki#custom-e
lements) |
| 110 * [WHATWG HTML Wiki: Custom Elements](https://github.com/whatwg/html/wiki#custom
-elements) |
| OLD | NEW |