I started an email thread about the idea here: http://lists.w3.org/Archives/Public/public-webapps/2016AprJun/0045.html
TLDR: I think it’d be nice to be able to name Custom Elements anything without requiring a hyphen, <box> for example. It’d be nice to be able to register elements with the same name as native elements (div, input, p, span, etc) in order to be able to override those elements. Furthermore, browser vendors could continue to add new native elements, but the proposed feature would allow users to override the elements if they wanted to.
Here’s the example from the email thread, which builds on my idea of being able to register elements on a per-shadow-root basis, and shows a pattern similar to React components where the component is a Custom Element, and the shadowRoot is to the Custom Element as what JSX/render() is to a React Component:
// --------------- SomeElement.js
import MyElement from './MyElement'
export default
class SomeElement extends HTMLElement {
constructor() {
this.root = this.createShadowRoot()
this.root.registerElement('MyElement', MyElement) // <myelement> or <MyElement>
const frag = document.createDocumentFragment()
frag.innerHTML = `
<div>
<MyElement>
...
</MyElement>
</div>
`
this.root.appendChild(frag)
}
static get observedAttributes() { return [ ... ] }
connectedCallback() { ... }
disconnectedCallback() { ... }
attributeChangedCallback() { ... }
}
// --------------- app.js
import SomeElement from './SomeElement'
import $ from 'jquery'
// elements registered on the document won't cross into shadow roots
document.registerElement('SomeElement', SomeElement)
$('<someelement>blah blah</someelement>').appendTo(document.body)
