WebComponent小demo

未来组件化开发趋势WebComponent

 

优点：原生组件，不需要框架，性能好代码少。
缺点：兼容性问题

组件化好处: 高内聚、可重用、可组合WebComponent

一、 核心三项技术

• Custom elements：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们
• Shadow DOM：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

 

组件的名字必须以中划线分割，避免与native标签冲突

 

• shadow DOM 可以实现真正的隔离机制 

 

 

 

二、实现Collapse 折叠面板组件

 

折叠分栏组件

1、组件使用

<zf-collapse >
        <zf-collapse-item title="Node" name="1">
            <div>nodejs welcome</div>
        </zf-collapse-item>
        <zf-collapse-item title="react" name="2">
            <div>react welcome</div>
        </zf-collapse-item>
        <zf-collapse-item title="vue" name="3">
            <div>vue welcome</div>
        </zf-collapse-item>
    </zf-collapse>

2、定义组件模板

<!-- 没有实际意义， 不会渲染到页面上 -->
    <template id="collapse_tmpl&