![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web component
Abelce
一个不太称职的程序员
展开
-
初探web component的使用(一)
Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。web component主要由四项主要技术组成:custome element、shadow DOM、HTML template、HTML imports,可参考MDN。一、customElements示例customeElements.define...原创 2019-05-15 18:38:52 · 1835 阅读 · 0 评论 -
web component使用(二)
web components中可以将html、css和行为封装在一起,就可以与页面上的其他功能分离开来,使代码更加干净,这些都是Shadow DOM来完成的。定义Shadow DOM将隐藏的DOM树添加到常规的DOM树中,它以shadow root为根结点,在根结点的下方,可以是任意的元素,和普通的DOM元素一样。图片来源于MDNshadow host: 一个常规DOM,Shad...原创 2019-05-27 23:14:46 · 417 阅读 · 0 评论 -
web component使用(三)
使用template和slot创建弹性模版,提高组件的灵活性template在网页上使用重复的html的时候,使用模版<template>比直接复制显然是更好的选择,不会被DOM直接的渲染出来,但通过javascript可以获取到 <template id="custome-detail"> <style> ...原创 2019-06-02 13:46:57 · 628 阅读 · 0 评论