百度云 网站备案,宁波高端网站设计公司,太仓手机网站建设价格,泉州网页模板建站web components 前面我们已经介绍过#xff0c;这一期我们就来讲一讲具体用法和这其中的关键只是点#xff1a;
1 基本使用
如果我们想实现一个封装的原生组件#xff0c;那就离不开使用js去封装#xff0c;这里主要就是基于HTMLElement这个类#xff0c;去创建创建一个…web components 前面我们已经介绍过这一期我们就来讲一讲具体用法和这其中的关键只是点
1 基本使用
如果我们想实现一个封装的原生组件那就离不开使用js去封装这里主要就是基于HTMLElement这个类去创建创建一个子类然后使用customElements.define去页面中注册这个组件。
export class dialog extends HTMLElement {constructor() {super(); // 必须首先调用 super()// 正确的做法if (!this.shadowRoot) {this.attachShadow({ mode: open }); // 或者 closed 根据需求}// 创建并添加样式到影子DOM中const style document.createElement(style);style.textContent dialog {padding: 0;width: 300px;height: 200px;border: 1px solid #888;}dialog::backdrop {background: rgba(0,0,0,0.5);}dialog .title {box-sizing: border-box;padding: 0 5px;width: 100%;height: 30px;line-height: 30px;color: #fff;background: var(--primary-color);}dialog .close {float: right;cursor: pointer;}dialog .footer{margin-top: 40px;};this.shadowRoot.appendChild(style);// 创建并添加元素到影子DOM中const div document.createElement(div);const mode this.getAttribute(mode) || show;const content this.getAttribute(content) || 我是默认内容;div.classList.add(custom-dialog);const form form methoddialog${content}div classfooterbutton typesubmit valuesubmit提交/buttonbutton typesubmit valuecancel取消/button/div/form;const dialogContent dialog classdialogdiv classtitledialog弹窗 span classcloseX/span/divdiv classcontent${[show, modal].includes(mode) ? content : form}/div/dialogbutton classshow-dialog${mode}弹窗/button;div.innerHTML dialogContent;this.shadowRoot.appendChild(div);this.dialog this.shadowRoot.querySelector(.dialog);const closeEvent (detail) new CustomEvent(onclose, {detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});this.shadowRoot.querySelector(.show-dialog).addEventListener(click, () {if (mode show) {this.dialog.show();} else {this.dialog.showModal();}});this.shadowRoot.querySelector(.close).addEventListener(click, () {this.dialog.close(top);});this.dialog.addEventListener(close, (e) {// 触发自定义事件this.dispatchEvent(closeEvent(this.dialog.returnValue));});}
}以上这个代码我就封装了一个基于html5新标签dialog封装的弹窗组件一下演示使用方法。 custom-dialog/custom-dialogcustom-dialogmodemodalcontentmodal模式演示有close监听/custom-dialogcustom-dialogmodemodal-formcontentmodal模式演示带有表单/custom-dialog
以上代码我来简单分解下
1 定义style
首先就是要给shadow Dom中要插入style标签和你自定义内容的html代码这样来实现样式和html代码封装主要的还是要实现代码的隔离。当然你接下来的交互自然也要约束在你组件内部。
2 组件内查找节点
当然你js中节点事件处理还是要基于this.shadowRoot.querySelector去做节点查找,然后使用原生的方法去做事件监听。
3 自定义事件派发 new CustomEvent(onclose, {detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});
这里就是定义一个自定义事件然后使用this.dispatchEvent(closeEvent(this.dialog.returnValue))派发出去。
4 注册组件
接下来我们聊聊这个注册组件以上代码仅仅是你定义组件页面上还并不能直接使用。customElements.define(custom-${i}, dialog); 使用以上方法才能在页面上以自己定义的名称使用。
2 插槽使用
插槽的使用给我们页面开发带来很大的方便这里我们演示一下插槽的使用方法。在web components中插槽沿革执行了组件的shadow-dom的特性即插槽部分的样式定义和js是不受shadow-dom的this.shadowRoot的影响的因为插槽为自定义内容其内容被渲染也不属于组件shadow-dom内部所以插槽被渲染出来dom结构并不在组件内部。
1 通过slot来定义插槽
div slotdesc纯htmlcss实现,无法实现更为复杂的功能和交互而且无法实现shadow-root实现样式隔离/div
2 使用插槽
在组件内部通过 slot name来使用如下。
const editorHtml div classeditor-descslot namedesc/slot/divdiv classeditor-codediv classcode-type${codeType}/divdiv classcode-containerdiv classcode-lines/divdiv classcode-contentslot namecode/slot/div/div/div;
3 插槽的渲染
其渲染出来的效果如图 这里需要特别注意插槽为自定义内容其内容被渲染也不属于组件shadow-dom内部所以插槽被渲染出来dom结构并不在组件内部特别实在做样式控制时要特别注意需要在使用组件的页面上定义样式。如果是在嵌套环境更要注意。
3 样式部分
因为shadow-dom的特性我们样式只可以写在组件内部。但是也有一些技巧。这里我分享一个就是做样式分离的方法。
const style document.createElement(link);style.setAttribute(rel, stylesheet);style.setAttribute(href, ./src/assets/editor.css);this.shadowRoot.appendChild(style); 1 分离css方法
创建一个link标签将样式从外部链接进来这样就可以不用做style这么麻烦了。
当然后面我再讲一讲如何做html代码分离。
样式分离了但是这里面又有一个问题就是样式穿透问题。这里就不得不说几个基于web component的味蕾和和选择器。
:host 这个使用在组件样式内部表示跟组件。使用这个我们可以约束根组件的样式。通常我们封装的组件都要通过一个div元素放在根组件内部而这个div通常我们并没有给其设置类名。这时使用这个伪类就比较好。
:host() 只选择自身包含特定选择器的自定义元素
:host-context() 选择拥有特定选择器父元素的自定义元素。
这些选择器后面详细来讲这里我主要谈一下样式的从父级项向下穿透的样式规则和需求。比如我们通常定义样式有全局级别的页面级别的还有小组件级别的。但是现在这种shadow-dom样式的完全隔离向实现其实比较困难。
2 样式控制
我先说第一种页面级别其页面级别样式可以直接影响到自己页面本身和插槽的样式这个也很好理解。因为插槽本身就是就是小组件外的内容样式的作用域能控制到当前页面也就能控制当前页面内的插槽。特别是在组件嵌套的情况下当家控制要是要特别注意。类似于这个:host/:host()都可以往出派生都比较容易控制。
第二种情况就比较特殊了就是全局样式。全局样式如果想穿透组件控制组件内部其实是比较麻烦的。这里我来详细讲一下。主要使用了::part伪元素。
.page::part(case-container) {margin: 10px 0;border: 1px solid #f6f6f6;
}
.page::part(case-title) {padding: 0 10px;line-height: 25px;font-size: 16px;
}.page::part(case-content) {background-color: #f6f6f6;padding: 10px;
}3 样式穿透
这里大家看到这个::part()括号中的是对应的组件.page中part属性的属性值的元素。 如上图这些html标签都被协商了part的key-value键值对。
前面的.page大家注意这个地方本来是要写组件名称的但如果写组件名称作用域就太小了所以我们给由相同需求的组件写一个类名这样作用范围就更广来实现更多需求全局样式穿透。
这个地方是给跟组件设置class的方法建议大家在这个地方处理这样的化组件本身就具备了类名。但是::part不能派生这也是个限制希望官方后期能更新这个限制。 this.setAttribute(class, page); 今天就先分享到这我的第一部分的原生html-web components项目部分已经马上完成即将和大家见面。大家请关注。
