I want to create a custom HTML element that behaves exactly like the built-in <div> element. I'm trying to prevent a <div> soup. I would for example want to have a <currency-list> element. This element should behave exactly like the <div> element. The only difference is the name. How can I achieve this?
Thanks, Yosemite
a DIV (HTMLDivElement) is a block element.
But you don't even need a defined Custom Element/Web Component to make a block element
customElements.define("currency-list", class extends HTMLElement {
connectedCallback() {
this.style.display = "block";
}
});
another-list {
display: block;
}
body>*:defined {
background: green;
color: beige;
}
body>*:not(:defined) {
background: lightgreen;
}
Line 1
<currency-list>Hello Web Component</currency-list>
Line 3
<div>Line 4</div>
Line 5
<another-list onclick="alert(this.constructor.name)">Line 6</another-list>
Line 7

<currency-list> is an "Autonomous Custom Element" (extends HTMLElement)
You can extend HTMLDivElement in Chromium and FireFox, but Apple has stated they will never implement "Customized Built-In Elements"
From: https://github.com/WICG/webcomponents/issues/509

<another-list> is an HTMLUnknownElement; nothing wrong with using it, its constructor is an HTMLElement, so can do everything an HTMLElement can do.
For more on the value of Unknown Elements see my Dev.to post
You can set any CSS display value on a DIV, you can't on your own Elements, as it will destroy the display:block setting.
PS. tag your SO questions web-component and/or custom-element