What was the reason for "observing from outside shadow DOM should not see mutations in the shadow"

Question

I am trying to observe change in the input value of text input element of the custom-input element at document level in the following document:

<body>
  <custom-div>
  </custom-div>
</body>

where the Custom Div and Custom Input definitions are as follows:

<!-- custom-div -->
<template>
    <custom-input>
    </custom-input>
</template>

<!-- custom-input-->
<template>
  <input type="text">
  <span>Units</span>
</template>

As state here legacy "change" events are not leaked out of shadow root, and the Chromium's test of Mutation Observer on shadow root states "observing from outside shadow DOM should not see mutations in the shadow."

So neither legacy change event with event bubbling, nor Mutation observers with subtree attribute change config would work here. I am curious what was the reason for the second part of the test case?

Also, the only way to implement the above scenario is to set observers on each level of custom elements which set/update their attributes on change of values in their immediate child element?

I have also followed the trail of this email, that lead to this conclusion. As stated, they concluded with implementing a method for form elements to emit changes in their values, but I could not find this in Mutation Observers documentations. — samarthg

Supersharp Supersharp · Accepted Answer · 2016-05-20T08:38:19

Shadow DOM realizes encapsulation.

It's the main reason/rationale of a Shadow DOM to isolate a Web Component's inner behavior (inside the Shadow tree) from the document tree outside.

So it seems a normal, expected behavior.

NB: If you need to catch tree changes in a simple manner, you can always use <template> in Custom Elements without Shadow DOM.

What do you want to achieve? In you example the need for a Shadow DOM is not obvious.

You can read:

this introduction on Shadow DOM if you want to learn more on Shadow DOM rationales,
or a focus on Event retargeting with Shadow DOM and Custom Elements.

What was the reason for "observing from outside shadow DOM should not see mutations in the shadow"

1 Answers