Web Components shadowRoot style doesn't have CSSStyleSheet object #3645

jcubic · 2023-12-25T17:18:13Z

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.

jcubic changed the title ~~Web Components shadowRoot style doesn't have style sheet object~~ Web Components shadowRoot style doesn't have CSSStyleSheet object Dec 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web Components shadowRoot style doesn't have CSSStyleSheet object #3645

Web Components shadowRoot style doesn't have CSSStyleSheet object #3645

jcubic commented Dec 25, 2023 •

edited

Web Components shadowRoot style doesn't have CSSStyleSheet object #3645

Web Components shadowRoot style doesn't have CSSStyleSheet object #3645

Comments

jcubic commented Dec 25, 2023 • edited

Basic info:

Minimal reproduction case

How does similar code behave in browsers?

jcubic commented Dec 25, 2023 •

edited