CODEWITHSUNDEEP
javascripthtmlweb-componentcustom-elementnative-web-component
TacoSnack
TacoSnack

Reputation: 179

this.getAttribute not working in web component while violating the spec

I'm making a web component that will show "Hello {name}!" where {name} comes from name="foo". When I try it I don't get any errors but it just displays "Hello null!".
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./script.js"></script>
</head>
<body>
  <hello-world name="Joe"></hello-world>
</body>
</html>

script.js:

class HelloWorld extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });

    const p = document.createElement('p');

    p.innerHTML = `Hello ${this.getAttribute('name')}!`;

    this.shadowRoot.append(p);
  }
}

customElements.define('hello-world', HelloWorld);

In any situation lets assume that name will always have an input.

Upvotes: 5

Views: 3123

Answers (1)

connexo
connexo

Reputation: 56753

You must not read attributes in the constructor, otherwise you're violating the specification:

The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.
From: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance

You must delay this kind of work until the connectedCallback triggers, or, in the case of attributes, configure a proper attributeChangedCallback.

Conforming to the spec will also solve your initial issue, and it will greatly enhance the functionality and usefulness of your web component.

Please note that it's also not the smartest of ideas to pick an attribute name that already exists in the HTML specification, as a universal attribute.

class HelloWorld extends HTMLElement {
  p = document.createElement('p');
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).append(this.p);
  }
  
  static get observedAttributes() { return ['greeting-name']; }
  attributeChangedCallback(attr, oldVal, newVal) {
    if (oldVal === newVal) return; // nothing to do
    switch (attr) {
      case 'greeting-name':
        this.p.textContent = `Hello ${newVal || 'world'}!`;
        break;
    }
  }
  
  connectedCallback() {
    if (!this.getAttribute('greeting-name')) { this.setAttribute('greeting-name', 'world'); }
  }
}

customElements.define('hello-world', HelloWorld);
<hello-world greeting-name="Joe"></hello-world>

<hello-world id="foo"></hello-world>

<input type="text" oninput="document.getElementById('foo').setAttribute('greeting-name', this.value)" placeholder="Type a name" />

Upvotes: 6

Related Questions