公众号:妙蛙种子前端
原文地址:Web Components 笔记二:使用 Custom Elements 创建可复用的自定义组件 | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客
上篇文章介绍了什么是Web Component,它出现的背景是什么,解决了什么问题。详细查看:
Web Components笔记一: Web Components是什么?解决了什么问题? | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客
本次我们尝试使用 Custom Elements
的来定义一个可以在页面上随意复用的自定义组件。组件为一个猫咪眼珠跟随小球运动的css动效,效果如:
DEMO在线地址: Custom Element - Web Component
创建组件模版
我们编写组件的目的就是为了dom、样式、事件的复用,因此我们需要使用一个组件模版来承载这些复用的东西。我们可以使用 HTML 的