Some tags with HTMLElement interface aren't customizable |
||
Issue description
Chrome Version: 66 canary with --enable-blink-features=CustomElementsBuiltin flag
OS: All but iOS
What steps will reproduce the problem?
(1) Launch Chrome, Chromium, or content_shell with --enable-blink-features=CustomElementsBuiltin flag
(2) Open the following URL:
data:text/html;charset=utf-8,<body><div class="container"></div><script>class PlasticRuby extends HTMLElement {constructor() {super();}connectedCallback() {this.style.color = 'blue';this.textContent = 'Ruby';}}customElements.define('plastic-ruby', PlasticRuby, { extends: 'ruby' });document.querySelector('.container').appendChild(new PlasticRuby());</script></body>
What is the expected result?
Blue "Ruby" is shown.
What happens instead?
Nothing is shown, and DevTools console has:
Uncaught TypeError: Illegal constructor: localName does not match the HTML element interface
Please use labels and text to provide additional information.
The following tags have this issue:
bdi, noscript, rt, ruby, summary, wbr
Firefox Nightly 60.0a1 works correctly.
,
Jan 29 2018
W/o the flag, It works as expected.
,
Jan 31 2018
Another example to verify HTMLRubyElement is used in Blink for "ruby".
<!DOCTYPE html>
<body>
<div><ruby>Base<rt>ruby</rt></ruby></div>
<div class="container"></div>
<script>
class PlasticRuby extends HTMLElement {}
customElements.define('plastic-ruby', PlasticRuby, { extends: 'ruby' });
var ruby = new PlasticRuby();
ruby.innerHTML = 'Base<rt>ruby</rt>';
document.querySelector('.container').appendChild(ruby);
</script>
</body>
This should show identical two line of "Base" with "ruby".
,
Jan 31 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6caa63215648ab1badc196718394d53089647f4d commit 6caa63215648ab1badc196718394d53089647f4d Author: Kent Tamura <tkent@chromium.org> Date: Wed Jan 31 08:43:49 2018 custom-elements: Create appropriate HTMLElement subclasses for custom built-in elements. Add custom built-in element support to <embed>, <object>, and <form>. Bug: 805281 , 806184 , 806185 , 806187 Change-Id: I920ea11ed0b5884c69d3c1aee04e18f7fa62e9f2 Reviewed-on: https://chromium-review.googlesource.com/895234 Reviewed-by: Yoshifumi Inoue <yosin@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/master@{#533234} [modify] https://crrev.com/6caa63215648ab1badc196718394d53089647f4d/third_party/WebKit/LayoutTests/external/wpt/custom-elements/builtin-coverage-expected.txt [modify] https://crrev.com/6caa63215648ab1badc196718394d53089647f4d/third_party/WebKit/Source/core/html/HTMLEmbedElement.idl [modify] https://crrev.com/6caa63215648ab1badc196718394d53089647f4d/third_party/WebKit/Source/core/html/HTMLObjectElement.idl [modify] https://crrev.com/6caa63215648ab1badc196718394d53089647f4d/third_party/WebKit/Source/core/html/custom/CustomElementDefinition.cpp [modify] https://crrev.com/6caa63215648ab1badc196718394d53089647f4d/third_party/WebKit/Source/core/html/forms/HTMLFormElement.idl
,
Feb 2 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/8ffc8ee5d3e71b2e4885427ec930b26102709a23 commit 8ffc8ee5d3e71b2e4885427ec930b26102709a23 Author: Yoichi Osato <yoichio@chromium.org> Date: Fri Feb 02 04:43:55 2018 custom-elements: Modify htmlElementTypeForTag() htmlElementTypeForTag(tagName) returns HTMLElementType for the name. However this returned wrong type for each tag that's DOM interface is HTMLElement but Blink implements the class inheriting HTMLElement, e.g. ruby element. htmlElementTypeForTag is generated function by make_element_type_helpers.py using HTMLTagNames.json5. This patch modifies the python script to return each appropriate DOM interface. Bug: 805281 Change-Id: I81525ae0a79d7b37e8e5e0df664375e2019f37c2 Reviewed-on: https://chromium-review.googlesource.com/892843 Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Yoichi Osato <yoichio@chromium.org> Cr-Commit-Position: refs/heads/master@{#533956} [modify] https://crrev.com/8ffc8ee5d3e71b2e4885427ec930b26102709a23/third_party/WebKit/LayoutTests/external/wpt/custom-elements/builtin-coverage-expected.txt [modify] https://crrev.com/8ffc8ee5d3e71b2e4885427ec930b26102709a23/third_party/WebKit/Source/build/scripts/make_element_type_helpers.py [modify] https://crrev.com/8ffc8ee5d3e71b2e4885427ec930b26102709a23/third_party/WebKit/Source/build/scripts/templates/element_type_helpers.cc.tmpl
,
Feb 2 2018
|
||
►
Sign in to add a comment |
||
Comment 1 by yoichio@chromium.org
, Jan 26 2018Status: Started (was: Available)