Re: [csswg-drafts] [css-pseudo] Custom properties on :root (#6641)

I'm not sure if that contributes to the discussion but I found another interesting behaviour (at least to me) when using dialog inside a web component in shadow DOM.

[Demo](https://codepen.io/matuzo/debug/yLRMbNZ)
[CodePen](https://codepen.io/matuzo/pen/yLRMbNZ)

```css
:root {
  --color1: blue;
}

::backdrop {
  --color2: green;

 background: var(--color1, var(--color2, var(--color3)));
}

@property --color3 {
  /* The type. */
  syntax: '<color>';
  /* Is it an inhertiable property? */
  inherits: true;
  /* The initial value. */
  initial-value: red;
}
```

The background colour of the backdrop in the following dialog is `green` because it doesn't inherit from root and takes the prop defined in `::backdrop`.

```html
<dialog>  
  <h1>Hey! :)</h1>
</dialog>
````

I would expect the same for a dialog in shadow DOM, but the background colour in this dialog is `red`.

```html
<my-modal>
  <h1>Hey! :)</h1>
</my-modal>
```


```js

class MyModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    
    const styles = document.createElement('style');
    styles.textContent = `
      ::backdrop {
        background: var(--color1, var(--color2, var(--color3)));
      }
    `    

    const dialog = document.createElement('dialog');
    dialog.innerHTML = `
        <slot></slot>
    `
    
    this.shadowRoot.append(styles)
    this.shadowRoot.append(dialog)
  }
}

customElements.define('my-modal', MyModal);
```

-- 
GitHub Notification of comment by matuzo
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6641#issuecomment-1520361350 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 24 April 2023 15:09:14 UTC