(7.4)--04_Web组件.pdf

《(7.4)--04_Web组件.pdf》由会员分享，可在线阅读，更多相关《(7.4)--04_Web组件.pdf（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、双击此处编辑标题饶晓宇Web组件Web组件使Web组件定义元素HTML模板影DOM实战：使Web组件?Web组件是在JavaScript中定义的?Web组件要定义的HTML标签名?card?component?Web组件可以接收有标识的组件?span slot=title?DocumentFragment节点document.createDocumentFragment()可以临时充当组同辈节点的节点向档中插DocumentFragment时，DocumentFragment本身并不会被插，实际上插的是它的节点定义元素?创建定义的类，扩展HTMLElement元素class CardCompo

2、nent extends HTMLElement;?创建定义HTML标签，必须包含连字符 customElements.def?ne(card?component,CardComponent);定义元素：命期法constructor()：创建定义元素时调。connectedCallback()：定义元素被插档时调。disconnectedCallback()：定义元素从档中被移除时调。attributeChangedCallback(attributeName,oldValue,newValue)：指定的定义元素属性被设置或修改时调；静态属性observedAttributes是个属性数组，指

3、定监听哪些属性的变化。HTML模板?创建HTMLTemplateElement的实例const template=document.createElement(template);?封装可重的HTML标记和CSS样式，可以通过“插槽”添加定义内容 template.innerHTML=Default Content?slot?div?HTMLTemplateElement只有个content属性，是个DocumentFragmentlet clone=template.content.cloneNode(true);document.querySelector(#search).append(

4、clone);影DOM?把个影根节点附加到元素上?element称为“影宿主”（shadow host）element.attachShadow(mode:open);?元素的shadowRoot属性引影根节点，也是个DocumentFragemnt element.shadowRoot.append(template.content.cloneNode(true);影DOM与阳光DOM影DOM的树始终显示在影宿主内。如果影DOM包含（插槽），则宿主的阳光DOM会替代其中的影DOM元素。如果影DOM不包含，阳光DOM永远不显示。如果影DOM有，但影宿主没有阳光DOM元素，则中的影DOM作为默认内容显示。当阳光DOM显示在影DOM插槽中时，那些元素不会成为影DOM的部分，它们仍然作为宿主元素的元素存在于阳光DOM中。如果影DOM定义了多个，且通过name属性为它们起了名字，那么影宿主的阳光DOM后代可以通过slot=slotname属性指定想出现在哪个插槽中。