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.
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" />