Shadow DOM

Shadow DOM 中的CSS选择器

Element.attachShadow({ mode: 'open' }) // close 封闭的，不允许外部访问（element.shadowRoot等），注意这不是安全机制

不能为一个元素创建多个 shadow DOM（可以多级）

不是所有元素都能被当成 shadow host（系统自带(input)的不能，无意义(img)的不能）

用代替了以前的元素，使用name属性精确匹配shadow host 的子元素（可匹配多个）

Fallback contents // 没找到slot的元素还是会显示

// slot's distributed nodes changes as a result of DOM mutations触发

::slotted() 代替 ::content

激活元素？焦点元素?

事件传递：默认在 tree 内，除了UIEvent

自定义事件穿越：shadowTreeDiv.dispatchEvent(new Event('my-click2', { bubbles: true, composed: true }));

// closed mode 元素为 paths 的第一个元素

// 防止全局事件名称冲突，需要和元素名称规范化事件名称，系统名-组件名-时间名

获取事件传播路径：Event.composedPath() // chrome 还有 Event.path

SlotElement.assignedNodes({ flatten: true })

Element.assignedSlot

Node.isConnected：Returns true if the node is in a shadow-including document.

Node.rootNode：Returns its root. // 可能要换

v0 ==================================

在文档中的位置可以位于自定义元素的定义执行之前

自定义元素的名字当中必须至少有一个"-"。任何不含"-"的标签名都会导致错误。

在使用WebComponents时，可以定义attribute和property，两者可以互相反射，也可以全无关联。

给shadow DOM添加侦听器时，去搞的target总是shadowRoot。注册的时候应该直接将showdown DOM的引用为参数作为侦听对象。

生命周期回调方法：

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {

this.addEventListener('click', function(e) { alert('Thanks!'); });

// 1. 为元素附加一个 shadow root。

var shadow = this.createShadowRoot();

// 2. 填入标记。

shadow.innerHTML = "I'm in the element's Shadow DOM!";

};

var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});

document.body.appendChild(document.createElement('x-foo-shadowdom'))