
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 · 1906 阅读 · 0 评论 -
web component使用(二)
web components中可以将html、css和行为封装在一起,就可以与页面上的其他功能分离开来,使代码更加干净,这些都是Shadow DOM来完成的。 定义 Shadow DOM将隐藏的DOM树添加到常规的DOM树中,它以shadow root为根结点,在根结点的下方,可以是任意的元素,和普通的DOM元素一样。 图片来源于MDN shadow host: 一个常规DOM,Shad...原创 2019-05-27 23:14:46 · 493 阅读 · 0 评论 -
web component使用(三)
使用template和slot创建弹性模版,提高组件的灵活性 template 在网页上使用重复的html的时候,使用模版<template>比直接复制显然是更好的选择,不会被DOM直接的渲染出来,但通过javascript可以获取到 <template id="custome-detail"> <style> ...原创 2019-06-02 13:46:57 · 664 阅读 · 0 评论