我试图在以下文档中观察文档级别的自定义输入元素的文本输入元素的输入值的变化:
<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遗留的“更改”事件不会从影子根中泄漏，并且 Chromium 的 test影子根上的 Mutation Observer 指出“从外部影子 DOM 进行观察不应看到影子中的突变。”
因此，具有事件冒泡的遗留更改事件和具有子树属性更改配置的突变观察者都无法在这里工作。 我很好奇测试用例第二部分的原因是什么？
此外，实现上述场景的唯一方法是在自定义元素的每个级别上设置观察者，这些观察者在其直接子元素中的值发生变化时设置/更新其属性？
最佳答案
Shadow DOM实现封装。
Shadow DOM 将 Web 组件的内部行为(Shadow 树内部)与外部的文档树隔离开来，这是 Shadow DOM 的主要原因/基本原理。
所以这似乎是正常的、预期的行为。
注意:如果您需要以简单的方式捕获树的变化，您可以随时使用 <template>在没有 Shadow DOM 的自定义元素中。
你想实现什么目标？在您的示例中，对 Shadow DOM 的需求并不明显。
您可以阅读:
- 这个introduction on Shadow DOM如果您想了解有关 Shadow DOM 原理的更多信息，
- 或 focus on Event retargeting使用 Shadow DOM 和自定义元素。
关于javascript - "observing from outside shadow DOM should not see mutations in the shadow"是什么原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37337308/