<template>元素新支持了shadowrootmode、shadowrootserializable等4个新的HTML属性，花1~2分钟音速了解下他们的作用吧。
阅读全文…
标签：attachShadow, html, Shadow DOM, shadowrootmode, shadowrootserializable, template, Web Components 发布在 HTML相关 | 3 条评论 »
实在没想到，Web还提供了这种特性，可以让任意自定义元素的行为变得就像原生的form表单元素那样，有点意思啊。
标签：attachInternals, form, Web Components, 组件, 自定义元素, 表单 发布在 HTML相关, JS API | 5 条评论 »
相似内核但语义不同的Web组件该如何更高效的组织代码才能兼顾可维护性和可阅读性呢？如何在任意位置对已由的自定义元素组件进行方法或属性的扩展呢？一点实战经验分享，希望可以帮到大家的工作。
标签：class, customElements, extends, Shadow DOM, slot, Web Components, 继承, 自定义元素 发布在 JS实例 | 4 条评论 »
兴趣使然，做了个音频播放器，支持各种循环模式，支持样式自定义，基于 howler.js实现，希望里面的内容能够对你的工作与学习有所帮助。
标签：audio, howler, slot, Web Audio API, Web Components, 播放器 发布在 JS实例 | 17 条评论 »
本文应该是目前最深入最细致的介绍 HTML slot 插槽元素的文章了，如果您对 Web 组件开发感兴趣，则本文内容不容错过。
标签：customElements, dialog, display:contents, html, slot, Web Components 发布在 HTML相关 | 6 条评论 »
太好了，HTML imports被废弃了，我可以放心使用这个语法实现HTML include功能了，从此静态页面也可以有公用头部和尾部啦。
标签：attributeChangedCallback, customElements, html, imports, link, rel, Web Components 发布在 HTML相关, JS实例 | 9 条评论 »
大家如果进行原生的web components组件开发，可能会遇到build-in自定义元素在Safari浏览器下不支持的场景，本文提供了相应的解决方案，为您的实际开发助航。
标签：connectedCallback, CustomEvent, dispatchEvent, polyfill, Safari, Web Components, 组件, 自定义元素 发布在 JS实例 | 一条评论 »
Web组件开发可能需要引入外部CSS到Shadow DOM中，本文就介绍3种各有优缺点CSS import的方法，帮助大家更好地进行web components组件开发。
标签：@import, adoptedStyleSheets, CSSStyleSheet, export, fetch, Shadow DOM, Web Components 发布在 CSS相关, JS实例 | 6 条评论 »
type=range类型输入框UI自定义兼容性很好很实用，但是只是单值选择，有没有可能直接两个拖拽按钮实现范围选择呢？可以的，活用CSS即可，JS只需做一点微小的支持。
标签：CSS变量, input range, pointer-events, Shadow DOM, Web Components, 组件, 自定义元素 发布在 Web综合 | 5 条评论 »
详细介绍CSS ::part伪元素，以及和Shadow DOM中<slot>一起使用的细节知识，多个demo和截图，希望可以帮到您的学习。
标签：::part, css相关, display:flow-root, Shadow DOM, slot, Web Components, 伪元素, 选择器 发布在 CSS相关 | 一条评论 »
张鑫旭more，09年华中科技大学毕业，现上海，就职于阅文集团，专注web前端偏前领域，著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱：zhangxinxu@zhangxinxu.com
关注我：微信微博掘金知乎抖音热更B站Gitee
我的应用
我的应用