Basic info:
- Node.js version: v20.10.0
- jsdom version: 23.0.1
Minimal reproduction case
const { JSDOM } = require("jsdom");
const options = { };
const dom = new JSDOM(`<!DOCTYPE html><html><body>`, options);
const window = dom.window;
const document = window.document;
function tag(name, class_name, text) {
const p = document.createElement(name);
p.innerText = text;
p.classList.add(class_name);
return p;
}
class HelloWorld extends window.HTMLElement {
constructor() {
super();
this.name = 'World';
this.color = 'red';
}
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
shadow.appendChild(style);
const p = tag('p', 'test', `Hello ${this.name}`);
shadow.appendChild(p);
const { sheet } = style;
console.log({sheet: style.sheet});
const index = sheet.cssRules.length;
sheet.insertRule(`.test { color: red }`, index);
}
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ] = newValue;
}
static get observedAttributes() {
return ['name', 'color'];
}
}
window.customElements.define('hello-world', HelloWorld);
const hello = document.createElement('hello-world');
document.body.appendChild(hello);How does similar code behave in browsers?
https://codepen.io/jcubic/pen/xxBbdPa?editors=0011
The same code from connectedCallback works fine outside Web Components.
Basic info:
Minimal reproduction case
How does similar code behave in browsers?
https://codepen.io/jcubic/pen/xxBbdPa?editors=0011
The same code from connectedCallback works fine outside Web Components.