从 Shadow DOM 中获取 GetElementById

Question

I have a custom-element with shadow DOM, which listens to attribute target change.
target is supposed to be the ID of the element which my component is supposed to be attached to.

I've tried using querySelector and getElementById to get the element of the outer DOM, but it always returns null .

console.log(document.getElementById(target));
console.log(document.querySelector('#' + target));

Both of the above return null .

Is there a way to get a reference to the element in the parent document from within shadow DOM?

Answer 1

You just have to call Shadow​Root .

this.shadowRoot.getElementById('target') should work.

Here's an example, the get syntax will bind an object property to a function.

get target() {
    return this.shadowRoot.getElementById('target');
}

Answer 2

If target is supposed to be an id, then

document.getElementById(target)

is a correct code to get the element by id. The other code,

document.querySelector(target)

is incorrect, the correct version would be

document.querySelector("#" + target)

The very fact that you get null as a result for the first means that there is no tag in the document with the id you specified. It might have been changed/removed, if it ever existed, or you might want to reach the id of another page's tag.

Answer 3

There are two use cases of shadow DOM as far as I can see:

1. You control the the shadow DOM solely through your hosting custom element (like in the answer of @Penny Liu). If you want make sure no other script should call and alter the nodes than this is your choice. Pretty sure some banking websites use this method. You give up on flexibility though.

2. You just want to scope some parts of your code for styling reasons but you like to control it via document.getElementById than you can use <slot> . After all, many libraries rely on the document object and will not work in shadow DOM.

Back to the problem, what you probably did was something like this:

shadowRoot.innerHTML = `...<script>document.getElementById('target')</script>`
// or shadowRoot.appendChild

This is NOT working! And this is not how shadow DOM was anticipated to work either.

Recalling method 2 , you SHOULD fill your shadow DOM solely by <slot> tags. Most minimal example:

<!-- Custom Element -->
<scoped-playground>
  <style>some scoped styling</style>
  <div id="target"></div>
  <script>const ☝☝☝☝ = document.getElementById('target')</script>
</scoped-playground>

<!-- Scoped playground has a shadowRoot with a default <slot> -->
...
this.shadowRoot.innerHTML = "<slot>Everything is rendered here</slot>";
...

More advanced <slot> examples can be found at:
https://developers.google.com/web/fundamentals/web-components/shadowdom#composition_slot