Question

我正在尝试观察以下文档中文档级别的自定义输入元素的文本输入元素的输入值的更改：

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

自定义Div和自定义输入定义如下：

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

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

状态为here遗产＆＃34;更改＆＃34;事件不会从影子根泄露出来，并且影子根状态的变异观察者的Chromium test＆＃34;从外部影子DOM观察不应该看到阴影中的突变。＆＃34; < / p>

因此，事件冒泡的遗留更改事件和子树属性更改配置的变异观察器都不适用于此。我很好奇第二部分测试用例的原因是什么？

另外，实现上述场景的唯一方法是在每个级别的自定义元素上设置观察者，这些元素在其直接子元素中的值更改时设置/更新其属性？

Answer 1

Shadow DOM 实现封装。

Shadow DOM的主要原因/理由是从文档树中隔离Web组件的内部行为（在 Shadow树中）

所以这似乎是正常的预期行为。

注意：如果您需要以简单的方式捕获树更改，则始终可以在没有Shadow DOM的自定义元素中使用<template>。

你想要达到什么目的？在您的示例中，对Shadow DOM的需求并不明显。

您可以阅读：

此introduction on Shadow DOM如果您想了解有关Shadow DOM基本原理的更多信息，

或带有Shadow DOM和自定义元素的focus on Event retargeting。

＆＃34;从外部观察DOM的原因是什么原因不应该看到阴影中的突变＆＃34;

1 个答案: