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

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Attachment: test_shadow_dom_inherited_rules.html

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.