`:host` pseudo-class does not apply styles when used in shadow roots #3661

nolanlawson · 2024-01-16T23:30:00Z

Basic info:

Node.js version: 20.9.0
jsdom version: 23.2.0

Minimal reproduction case

const jsdom = require("jsdom")
const { JSDOM } = jsdom

const dom = new JSDOM(`<!DOCTYPE html>`)
const { window } = dom
const { document } = window

window.customElements.define('x-foo', class extends window.HTMLElement {
  constructor() {
    super()
    const style = document.createElement('style')
    style.textContent = ':host { color: red }'
    this.attachShadow({ mode: 'open' }).appendChild(style)
  }
})

const elm = document.createElement('x-foo')
document.body.appendChild(elm)

console.log(window.getComputedStyle(elm).color) // should log rgb(255, 0, 0)

In JSDOM, this code will log the empty string.

How does similar code behave in browsers?

CodePen repro

In the browser, the code above logs rgb(255, 0, 0).

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`:host` pseudo-class does not apply styles when used in shadow roots #3661

`:host` pseudo-class does not apply styles when used in shadow roots #3661

nolanlawson commented Jan 16, 2024

:host pseudo-class does not apply styles when used in shadow roots #3661

:host pseudo-class does not apply styles when used in shadow roots #3661

Comments

nolanlawson commented Jan 16, 2024

Basic info:

Minimal reproduction case

How does similar code behave in browsers?

`:host` pseudo-class does not apply styles when used in shadow roots #3661

`:host` pseudo-class does not apply styles when used in shadow roots #3661