Shadow Dom (Shadowroot) Access

Example

Gtx.shadowRoot.getElementById ("translation")

GTX as host object

Cause

Grab the contents of the chorome Google Translate docking rack. Content with information div ID is "bubble-content"

var Contend=document.getelementbyid ("Bubble-content")

Contend is NULL?!! How could it be null? I'm not spelling it wrong.

This is unscientific and then found that the DIV has a #shadow-root (open) in the outer layer

Something I've never seen before.

It's not always a demon, question 80% is right here.

After checking the relevant information, determine

In short, shadow-root the object under the parcel, not in the global Dom tree, so getElementById, and so on, gets the object in the package.

The purpose of this function is to separate out a block of rendering, not affected by the outer style, the inner layer of the style does not affect the display of the outer layers.

Access is as follows

1 Get the root node of the shadow-root outer layer This node is in the global DOM tree.

var Gtx=document.getelementbyid ("Gtx-host")

2 Get the Shadow block of the GTX

Gtx.shadowroot

After 3, you're free to do it again.

For example, take a node in a shadow block.

var Truecontent=gtx.shadowroot.getelementbyid ("translation");

Later think about, in fact, before vaguely seen this function, but because one really no use, forgotten

Shadow Dom (Shadowroot) Access