webc/constructor-no-attributes

Dlaczego

An element made with document.createElement('acme-card') has no attributes and no children while its constructor runs, so reading them gives null. Adding them makes the creation fail: createElement throws, and so do frameworks that create elements this way. The element then works when written in HTML and breaks when a framework renders it.

Poprawka

In the constructor only call super(), set default state, attach the shadow root and add listeners. Read attributes in connectedCallback or attributeChangedCallback (list them in observedAttributes), and set a default role or state through ElementInternals (this.internals.role = 'button') instead of adding attributes to the host.

Przykłady

// bad
constructor() {
  super()
  this.setAttribute('role', 'button')
  this.label = this.getAttribute('label')
}
// good
constructor() {
  super()
  this.internals = this.attachInternals()
  this.internals.role = 'button'
  this.attachShadow({ mode: 'open' })
}
connectedCallback() { this.label = this.getAttribute('label') }

Źródła

• HTML Standard, Requirements for custom element constructors and reactions
• MDN, Using custom elements (custom element lifecycle callbacks)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain webc/constructor-no-attributes