Cannot use well-known attribute names with custom elements #45
Description
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and discussions and couldn’t find anything (or linked relevant results below)
Affected package
https://esm.sh/hast-util-to-html@9?bundle
Steps to reproduce
See here: https://jsbin.com/jelewudote/3/edit?html,console,output
Copy Pasta'd repro for later reference
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script> console.clear(); class Foo extends HTMLElement { connectedCallback() { console.log(`rendered: ${this.getAttribute("selected")}`); } } customElements.define("my-foo", Foo) </script> <script type="module"> import {toHtml} from "https://esm.sh/hast-util-to-html@9?bundle" console.log(`serialized: ${toHtml({ type: "element", children: [], properties: { selected: "some value", }, tagName: "my-foo", })}`) </script> <my-foo selected="some value"></my-foo> </body> </html>Basically:
- define a custom element which relies on the value of an attribute that has a well-known name
- serialize such a custom element with an "unexpected" value for the well-known name
Actual behavior
Serialization enforces the well-known definition over its intended usage.
"serialized: <my-foo selected></my-foo>"
Expected behavior
Serialization should not enforce the well-known definition in the case of custom elements. It should align with what is rendered by the browser.
"serialized: <my-foo selected="some value"></my-foo>"
Runtime
Firefox/Chrome
Package manager
No response
Operating system
No response
Build and bundle tools
No response