// 自定义元素生命周期回调在元素定义后就固定了
Shadow DOM 中的CSS选择器
Element.attachShadow({ mode: 'open' }) // close 封闭的，不允许外部访问（element.shadowRoot等），注意这不是安全机制
不能为一个元素创建多个 shadow DOM（可以多级）
不是所有元素都能被当成 shadow host（系统自带(input)的不能，无意义(img)的不能）
用<slot> 代替了以前的<content> 元素，使用name属性精确匹配shadow host 的子元素（可匹配多个）
Re-distribution: Directly (v0) vs Indirectly by flattening (v1)
Fallback contents // 没找到slot的元素还是会显示
Events to react the change of distributions
// 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 ==================================
<x-component> 在文档中的位置可以位于自定义元素的定义执行之前
自定义元素的名字当中必须至少有一个“-”。任何不含“-”的标签名都会导致错误。
在使用WebComponents时，可以定义attribute和property，两者可以互相反射，也可以全无关联。
给shadow DOM添加侦听器时，去搞的target总是shadowRoot。注册的时候应该直接将showdown DOM的引用为参数作为侦听对象。
生命周期回调方法：
- 元素创建后调用 .createdCallback()；
- 元素附加到文档后调用 .attachedCallback()；
- 从文档中移除元素后调用 .detachedCallback()；
- 元素任一属性变更后调用 .attributeChangedCallback()。
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 = "<b>I'm in the element's Shadow DOM!</b>";
};
var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});
document.body.appendChild(document.createElement('x-foo-shadowdom'))
