未注册的 HTML 自定义元素和已注册的 HTML 自定义元素有什么区别？

Question

如果我注册自定义元素失败，我注意到我仍然可以：

使用 CSS
使用JS

示例：

// REGISTER <my-custom-element-1>
class MyRegisteredCustomElement1 extends HTMLElement {
  constructor() {
    super();
  }
};

customElements.define('my-custom-element-1', MyRegisteredCustomElement1);

// ATTACH EVENT LISTENERS TO BOTH CUSTOM ELEMENTS
const myCustomElement1 = document.getElementsByTagName('my-custom-element-1')[0];
const myCustomElement2 = document.getElementsByTagName('my-custom-element-2')[0];

const customElementAlert = (e) => {

  switch (e.target.nodeName.toLowerCase()) {
  
    case ('my-custom-element-1') : console.log('I\'m a registered custom element and I can be scripted and styled.'); break;
    case ('my-custom-element-2') : console.log('I\'m an unregistered custom element. Nevertheless, I can be scripted and styled TOO.'); break;
  }
}

myCustomElement1.addEventListener('click', customElementAlert, false);
myCustomElement2.addEventListener('click', customElementAlert, false);

:not(:defined) {
  border: 1px dashed rgb(0, 0, 0);
}

my-custom-element-1,
my-custom-element-2 {
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 12px;
  padding: 6px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

my-custom-element-1 {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

my-custom-element-1::after {
  content: 'I\'m a registered custom element.\A CLICK ME';
}

my-custom-element-2 {
  background-color: rgb(255, 255, 0);
}

my-custom-element-2::after {
  content: 'I\'m an unregistered custom element.\A CLICK ME';
}

<my-custom-element-1></my-custom-element-1>
<my-custom-element-2></my-custom-element-2>

如果可以对未注册的自定义元素进行样式设置和脚本化，那么注册自定义元素具体可以启用什么？

Answer 1

基本上它将元素与您为其设置的 class 相关联。它：

允许使用像 connectedCallback（和 disconnectedCallback）这样的生命周期回调
允许在构造函数中使用自定义逻辑和属性。

您创建的 my-custom-element-2 元素只是一个常规 HTML 元素，没有您指定的特定 class 元素。如果你检查 DOM 你会看到 my-custom-element-2 的 class 是 HTMLElement 而 my-custom-element-1 的 class 是 myRegisteredCustomElement1 .

未注册的 HTML 自定义元素和已注册的 HTML 自定义元素有什么区别？

What's the difference between an unregistered HTML Custom Element and a registered HTML Custom Element?

javascript

html

css

registration

custom-element