I am working on creating some web components and trying to pull data in from the component attributes. When I console.log(this), it shows the correct element and the attributes associated. Same as when I console.log(this.attributes). However, if I console.log(this.getAttribute('attribute')) or console.log(this.hasAttribute('attribute')) I get back null and false respectively.
Can someone make sense of this? Here is the code I am working with:
index.html
<script src="component.js"></script>
<test-component test1="Test-text" test2=""></test-component>
component.js
const template = document.createElement('template');
template.innerHTML = `...`;
class TestComponent extends HTMLElement {
constructor(){
super();
this.attachShadow({mode: 'open'});
const shadow = this.shadowRoot;
shadow.appendChild(template.content.cloneNode(true));
console.log(this); // Shows correct element with attributes
console.log(this.attributes); // Shows attributes
console.log(this.getAttribute('test1')); // Returns null
console.log(this.hasAttribute('test1')); // Returns false
}
}
window.customElements.define('test-component', TestComponent);
Only in the connectedCallback does your CE exist in DOM.
In the constructor it is only pre-processed in memory, you can work with its shadowDOM, but the CE is not in the (main) DOM yet, thus you can not access attributes.
customElements.define('test-component', class extends HTMLElement {
constructor(){
super()
.attachShadow({mode: 'open'})
.innerHTML = `Content in shadowDOM`;
}
connectedCallback(){
console.log(this.getAttribute('test1'));
}
});<test-component test1="A Attribute"></test-component>If you define the CE after it is used in the DOM, the CE will be in the DOM and the constructor can read its attributes.
You should never rely on this behavior
A. Your CE user can load/define in the <head>
B. Your CE user can do let myCE = document.createElement("test-component")
which runs the constructor, but the connectedCallback will only run the moment .appendchild(myCE) executes