Shadow DOM的JavaScript操作

2017年07月21日Web前端

我们已经了解了如何去创建一个静态的Shadow DOM,是时候了解下JS是如何使用的了。

一、JavaScript 作用域

Shadow DOM可以很好的保护元素不被外部的样式干扰,Shadow DOM 里的 JavaScript 的使用方式和之前其实区别不大。我们来试下:

<div id="box">
    <span>hello,world</span>
</div>

<template class="box-template">
    <div>
        <p>hello,world</p>
    </div>
    <script>
        var str = 'hello';
    </script>
</template>
<script type="text/javascript">
var shadowRoot = document.querySelector('#box').createShadowRoot();

var template = document.querySelector('.box-template');
shadowRoot.appendChild(document.importNode(template.content, true));
</script>

然后,我们在控制台输入str,

我们发现,JS并没有被Shadow DOM封装起来,在外部是仍然可以访问到的。所以我们可以使用立即执行函数(IIFE)的方式来防止全局变量污染。

<template class="box-template">
    <div>
        <p>hello,world</p>
    </div>
    <script>
    (function() {
        var str = 'hello';
    })();
    </script>
</template>

这样的话,在控制台就得不到str变量的值了。

二、事件重定向

Shadow DOM 里的 JS 与传统的 JS 一个真正不同的点在于事件调度。原来绑定在 shadow DOM 节点中的事件被重定向了,所以他们看起来像绑定在影子宿主上一样。 来自 JS Bin的例子:

<body>
    <input id="normal-text" type="text" value="I'm normal text">
    <div id="host"></div>
    <template>
        <input id="shadow-text" type="text" value="I'm shadow text">
    </template>
</body>
<script type="text/javascript">
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var template = document.querySelector('template');
root.appendChild(document.importNode(template.content, true));

document.addEventListener('click', function(e) {
   console.log(e.target.id + ' clicked!');
});
</script>

当我们点击第二个Shadow DOM中的输入框时,控制台上打印的是宿主对象host的id。这是因为影子节点上的事件必须重定向,否则这将破坏封装性。如果事件继续指向 #shadow-text 那么任何人都可以在我们的 Shadow DOM 里破坏我们内部的结构。

三、分布式节点

当我们使用到分布式节点的时候,事件会被重定向么?继续JS Bin上的例子。

<input id="normal-text" type="text" value="I'm normal text">
<div id="host">
    <input id="distributed-text" type="text" value="I'm distributed text">
</div>

<template>
    <div>
        <input id="shadow-text" type="text" value="I'm shadow text">
    </div>
    <div>
        <content></content>
    </div>
</template>
<script type="text/javascript">
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var template = document.querySelector('template');
root.appendChild(document.importNode(template.content, true));

document.addEventListener('click', function(e) {
   console.log(e.target.id + ' clicked!');
});
</script>

当我们点击第三个分布式节点中的input时,我们发现时间是在该元素上的,并没有被重定向。这是因为分布节点来自原有 DOM 结构,而用户是可以操作原有 DOM 结构的。对它进行事件重定向没啥必要,而且事实上你也不想让它重定向。如果一个使用者给你提供一个按钮来对 Shadow DOM 设置样式,有时候他们可能会希望监听它的 click 事件。

四、被阻塞的事件

有些情况下事件绑定不进行重定向而直接被干掉。以下时间会被阻塞到根节点且不会被原有 DOM 结构监听,

  • abort
  • error
  • select
  • change
  • load
  • reset
  • resize
  • scroll

JS Bin上的例子:

<input id="normal-text" type="text" value="I'm normal text">

<div id="host">
    <input id="distributed-text" type="text" value="I'm distributed text">
</div>

<template>
    <div>
        <content></content>
    </div>
    <div>
        <input id="shadow-text" type="text" value="I'm shadow text">
    </div>
</template>
<script type="text/javascript">
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var template = document.querySelector('template');
root.appendChild(document.importNode(template.content, true));

document.addEventListener('change', function(e) {
    console.log(e.target.id + ' text changed!');
});
</script>

普通的输入框和分布式节点的DOM都可以将事件冒泡到document,并且能够成功被监听,而Shadow DOM中的输入框的事件冒泡到Shadow Root就会停止向上,所以绑定在文档上的事件是不会触发的。

Shadow DOM与原生DOM的关系图,如下:

原文地址:http://www.ituring.com.cn/article/177453