Open Bug 1490615 Opened 6 years ago Updated 2 years ago

Inherited CSS values are not displayed if they are coming from Shadow DOM

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: jdescottes, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Attached file test_shadow_dom_inherited_rules.html (deleted) —
If an element from the light DOM inherits css values from a parent which is in the Shadow DOM the RulesView is not showing "Inherited from ..."

For example, the markup of the test page in attachment looks like

  test-component
    #shadow-root
      style
      slot1
        div(slotted)
      slot2
        fallback-div
    div(original)

We have slot { color: red } defined in a <style> inside the shadow root. Since the color property is inherited, both the slotted div and the fallback div will have their text content look red. 

However, when selecting the slotted div (or it's original version, they are the same element anyway), the RuleView is not showing where the color property is inherited from. 

STRs:
- open html page in attachment
- open inspector 
- inspect the first line of the page "This is red, but RulesView don't explain why"

ER: Ruleview should explain why this is red
AR: No mention of the color property in the ruleview.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: