javascript - 有没有办法阻止 shadow dom 中的 javascript 访问它之外的 DOM？

Question

所以如果我有:

js可以改变component_test_div中的文字

我可以阻止吗？

Answer 1

脚本不受 shadow DOM 保护

Shadow DOM 只保护 CSS 泄漏或干扰 shadowRoot 的内容。它不会为 JavaScript 创建新的命名空间。

在这段代码中，我在阴影根目录中有一些 JS:

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'});
    let s = document.createElement('script');
    s.textContent = "function dog() { console.log('Bark, Bark'); }";
    this.shadowRoot.appendChild(s);
  }
}

customElements.define('my-el', MyEl);

setTimeout(()=>dog(), 2000);

<my-el></my-el>

2 秒后我们调用函数 dog() 并且它起作用了。这是因为，即使这段代码被放入 shadowRoot 中，它仍然在全局范围内执行。

鉴于无法在 Web 组件中隔离您的 JavaScript，您需要记住它对其范围内的任何人都可用。

如果将代码放在 IIFE 中，则可以防止外部调入。但是仍然没有办法阻止内部调出或操作作用域外的东西。

---

确定元素是否在 shadowDOM 中的替代方法

作为@Angel Politis 回答的替代方法，有一种更简单的方法可以确定某个元素是否在某人的 shadowRoot 中:

function isInShadowDOM(el) {
  let ret = false;

  if (el.getRootNode) {
    doc = el.getRootNode();
    ret = (doc !== document);
  }

  return ret;
}