行为类似于内置 <div> 元素的自定义 HTML 元素

Question

我想创建一个行为与内置 <div> 元素完全相同的自定义 HTML 元素。我正在努力阻止 <div> 汤。例如，我想要一个 <currency-list> 元素。该元素的行为应该与 <div> 元素完全一样。唯一的区别是名称。我怎样才能做到这一点？

谢谢， Yosemite

Answer 1

一个 DIV (HTMLDivElement) 是一个 block 元素。

但您甚至不需要 定义的 自定义 Element/Web 组件来制作 block 元素

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> 是一个 "Autonomous Custom Element" (extends HTMLElement)
您可以延长 HTMLDivElement in Chromium and FireFox, but Apple has stated they will never implement "Customized Built-In Elements"
来自：https://github.com/WICG/webcomponents/issues/509

<another-list> 是一个 HTMLUnknownElement；使用它没有错，它的 constructor 是和 HTMLElement，所以 HTMLElement 可以做所有事情可以做。
有关未知元素值的更多信息，请参阅 my Dev.to post
您可以在 DIV 上设置任何 CSS display 值，但不能在您自己的元素上设置，因为它会破坏 display:block设置。

PS。标记您的 SO 问题 web-component and/or custom-element

行为类似于内置 <div> 元素的自定义 HTML 元素

Custom HTML element that behaves like the built-in <div> elment

html

javascript

web-component

custom-element

备注：