Question

我需要在访问方面将自定义元素与页面的其余部分隔离开来。

我的HTML

<div class="search">
<div class='panel panel-primary'>
    <div class='panel-heading resultbar'>
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <span class=' navbar-toggle collapsed glyphicon glyphicon-menu-hamburger' (window:resize)="onZoomIn($event)" (click)="toggleHeader()" style="cursor: pointer;" placement="top"></span>
        **</div>**

helloelement.js：

<html>
<script src="helloelement.js"></script>

<body>
<div id="normal">normal element</div>
<hello-element name="Everyone"></hello-element>
</body>
</html>

在这一行中，

class HelloElement extends HTMLElement {
  // Monitor the 'name' attribute for changes.
  static get observedAttributes() {return ['name']; }

  // Respond to attribute changes.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.textContent = `Hello, ${newValue}`;

      alert(document.getElementById("normal").innerHTML="from custom");
    }
  }
}

// Define the new element
customElements.define('hello-element', HelloElement);

它访问并修改其他元素“normal”..我可以限制它只访问自定义元素中存在的元素吗？

例如：只有hello-element内部的那些应该可以在helloelement.js中访问..

任何参考？ 谢谢！

Answer 1

使用JavaScript编写Web组件，并且JavaScript没有沙盒限制。

您需要编写自己的组件，以便建立自己的规则，信任第三方组件，或者只使用您的团队/系统审查过的可信组件。

如何限制自定义元素访问其他dom元素？

1 个答案: