shadowRoot attached on DIV Element does not reset styles with all:initial

[Danny-Engelman]

Should it be possible to reset styles with :host{ all:initial } ??

Same behavior on Chromium and FireFox:

JSFiddle: https://jsfiddle.net/WebComponents/6u1e4m3y/

<style>
  div,
  custom-element {
    color: red;
    font-weight: bold;
  }

</style>

<div id="div1" reset=":host" style="color:green"></div>
<div id="div2" reset=":host" style="all:initial"></div>
<div id="div3" reset=":host"></div>
<div id="div4" reset="div"></div>
<custom-element reset=":host"></custom-element>
<custom-element reset="div"></custom-element>

<script>
  function attachShadowRoot(el) {
    let shadow = el.attachShadow({mode: 'open'});
    let reset = el.getAttribute("reset");
    shadow.innerHTML = `<style>${reset} { all: initial; }</style><div></div>`;
    let div = shadow.querySelector("div");
    let { color } = getComputedStyle(div);
    div.innerHTML = `reset in: ${reset} color: ${color} in ${el.nodeName} id: ${el.id}`;
  }
  attachShadowRoot(div1);
  attachShadowRoot(div2);
  attachShadowRoot(div3);
  attachShadowRoot(div4);
  customElements.define("custom-element", class extends HTMLElement {
    connectedCallback() {
      attachShadowRoot(this);
    }
  })
</script>

[domenic]

This sounds like a browser bug, not a spec bug, so it's probably best filed on browser bug trackers, not spec bug trackers?

[Danny-Engelman]

I made an update.

Looks like :host{ all:initial } does not reset styles, while declared as attribute on the host it does reset

[bathos]

Which outcome above is unexpected? I'm probably missing something but it seemed like these results are consistent with the specificities of the style attribute (highest), selectors matching the host element in light dom (middle), and the :host selector in shadow (lowest).

[rniwa]

Non-important style rules inside a shadow root has a lower precedence to non-important & important style rules outside the shadow root. If you wanted to force resetting all properties on the host, it needs to be important since important style rules inside a shadow root has a higher precedence over everything else: i.e. all: initial !important.

[annevk]

Sounds like this is working as designed. Thanks all!