1679543 - [Inactive CSS] Incorrect warning for ::after pseudo-element on shadow-root in custom element

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Ardeshir Izadi]

Attachment: Screenshot from 2020-11-27 19-04-57.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:83.0) Gecko/20100101 Firefox/83.0

Steps to reproduce:

• defined a web-component
• defined style like this:
  :host::after {
  content: ' ';
  width: 100px;
  height: 100px;
  display: block;
  background-color: red;
  }
• I got error: width has no effect on this element since it has a display of inline. Try adding display:inline-block or display:block. Learn more

Actual results:

• The style I was looking for was applied correctly, but I got incorrect warning.

Expected results:

• I was not expecting warning.

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: shadow-root-after.html

Confirmed. Thanks for filing!

This likely impacts all Inactive CSS rules on pseudo-elements within a shadow root. The bounding element of the pseudo-element is not resolved correctly by the Inactive CSS property helper

See attached sample file, shadow-root-after.html.

In this specific example, this issue occurs when:

1. The ::after pseduo-element is applied to the shadow root
2. The custom element is selected in the Markup panel
3. The pseudo-element styles show in an accordion in the Rules panel in addition to the custom element's styles.

When selecting the ::after pseduo-element in the Markup panel and showing its styles directly in the Rules view, the Inactive CSS warning does not appear.

Comment 2

[Razvan Caliman [:rcaliman]]

The incorrect warnings do not show for pseudo-elements outside shadow dom.
For example, run this in a new tab to verify:

data:text/html,<style>:root::after {content: ' ';width: 100px;height: 100px;display: block;background-color: red;}</style>

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: incorrect warnings on pseudo-element in Rules view when custom element is selecte

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: no warnings when pseudo-element is selected directly