Open
Bug 1679543
Opened 3 years ago
Updated 9 months ago
[Inactive CSS] Incorrect warning for ::after pseudo-element on shadow-root in custom element
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(Not tracked)
NEW
People
(Reporter: ardeshireo, Unassigned)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(4 files)
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.
Updated•3 years ago
|
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Updated•3 years ago
|
Component: CSS Parsing and Computation → Inspector
Product: Core → DevTools
Comment 1•3 years ago
|
||
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:
- The ::after pseduo-element is applied to the shadow root
- The custom element is selected in the Markup panel
- 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•3 years ago
|
||
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>
Severity: -- → S3
Depends on: 1540753
Priority: -- → P3
Summary: wrong detection of `has no effect` in CSS for `::after` element → [Inactive CSS] Incorrect warning for ::after pseudo-element on shadow-root in custom element
Updated•3 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
Comment 3•3 years ago
|
||
Comment 4•3 years ago
|
||
Updated•9 months ago
|
Blocks: devtools-pseudo
You need to log in
before you can comment on or make changes to this bug.
Description
•