美文网首页
web component

web component

作者: _听风细雨 | 来源:发表于2020-07-05 10:07 被阅读0次

    最近因为工作需要开发插件,接触到了web component(原生的功能)。web component可以自定义元素,方便代码复用。现在主流的框架angular,react都支持打包成web component自定义组件的形式。也就是说用某一种框架开发的组件打包成web component后可以在其他项目中进行使用。这样插件开发可以不用考虑原项目用的什么技术,插件都可以支持,也就实现了多个项目的功能复用。下面是web component的简单demo,后面有机会会写一些有关于插件的。

    index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
    </head>
       <style>
           /* 传递给子组件的值 */
           web-component{
               --color:red;
           }
       </style>
    <body>
       <h3 id="h3">自定义组件</h3>
       <template id="myTemplate">
           <div>
               通过template定义的元素不会直接显示在页面上。
           </div>
           <slot name="mySlot">插槽自定义内容。</slot>
           <p>
               设置css。
           </p>
       </template>
       <web-component name="默认值">
           <div slot="mySlot">向插槽传递内容。</div>
       </web-component>
    </body>
    <script>
       // 监听子组件传递的数据
        document.querySelector('web-component').addEventListener('custom', e => console.log('message from event:', e.detail.message));
    </script>
    <script src="./index.js"></script>
    </html>
    

    index.css

    p{
        /* 接收父组件传递过来的值。 */
        color: var(--color);  
    }
    /* 设置默认值 */
    :host{
        --color:blue;
    }
    

    index.js

    class WebComponent extends HTMLElement{
        constructor(){
            super();
            // 通过attachShadow自定义的元素不会受外部css样式的影响,也不会影响到外部的css。
            //mode设置为open可以通过DOM节点的方式进行获取,设置为close不可以。
            const shadow = this.attachShadow({mode:"open"});  
            const template = document.getElementById("myTemplate");
            const templateContent = template.content;
            const link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = "./index.css";
            shadow.appendChild(link);
            shadow.appendChild(templateContent.cloneNode(true));
        }
        // 配置监听的属性,否则不会触发attributeChangedCallback
        static get observedAttributes() {
            return ['name'];
        }
        // 自定义组件的生命周期
        connectedCallback() {
            console.log("自定义元素被插入到DOM文档。");
            // 向父组件传递数据。
            this.dispatchEvent(new CustomEvent('custom', {
                detail: { message: 'a custom event' }
            }));
        }
    
        disconnectedCallback() {
            console.log("自定义元素被移除。");
        }
    
        adoptedCallback() {
            console.log("当自定义元素被移动到新的文档时被调用。");
        }
    
        attributeChangedCallback(name, oldValue, newValue) {
            console.log(name,oldValue,newValue);
            console.log("传递给自定义元素的属性改变。");
        }
    }
    // 自定义元素采用-拼接的形式,是为了与原生html元素进行区分
    customElements.define("web-component",WebComponent);
    

    相关文章

      网友评论

          本文标题:web component

          本文链接:https://www.haomeiwen.com/subject/vpnmqktx.html