| | 1 | = Shadow DOM for Replaced Elements = |
| | 2 | |
| | 3 | This page explains Shadow DOM for Replaced Elements. |
| | 4 | |
| | 5 | = Background = |
| | 6 | |
| | 7 | Per HTML specification, some HTML elements are designed to either not render their contents or have special requirements in regard to contents rendering. |
| | 8 | According to the spec [http://www.w3.org/TR/shadow-dom/], all the HTML elements are considered having an equivalent of a shadow DOM subtree that is created and populated at the time of element instantiation. |
| | 9 | |
| | 10 | = Implementation = |
| | 11 | |
| | 12 | To implement Shadow DOM for these elements, we use either of these options. |
| | 13 | 1. Some HTML elements have a UserAgentShadowRoot at the time of element instantiation |
| | 14 | 2. Other HTML elements does not have a UserAgentShadowRoot at the time of element instantiation, but just before we add AuthorShadowDOM to these elements, we instantiate UserAgentShadowDOM for these elements. (Lazily instantiated UserAgentShadowDOM) |
| | 15 | |
| | 16 | The lazily instantiated UserAgentShadowDOM basically has an inner element, which is almost the same to the host. It will create the same renderer as the host's. The host's renderer will become just a RenderBlock or RenderInlineBlock or something defined in CSS. |
| | 17 | |
| | 18 | = Styling = |
| | 19 | |
| | 20 | To style the inner element of UserAgentShadowDOM for replaced elements, pseudo id is used. These are the implemented pseudo ids. This will grow as we implement Shadow DOM for other replaced elements. |
| | 21 | |
| | 22 | || element name || pseudo id || |
| | 23 | || img || -webkit-image-inner-element || |
| | 24 | |
| | 25 | |
