相似内核但语义不同的Web组件该如何更高效的组织代码才能兼顾可维护性和可阅读性呢?如何在任意位置对已由的自定义元素组件进行方法或属性的扩展呢?一点实战经验分享,希望可以帮到大家的工作。
文章关键字 ‘Shadow DOM’
如何继承自定义元素及其他JS中扩展新方法
2022年06月19日,星期日Web Components中引入外部CSS的3种方法
2021年02月13日,星期六Web组件开发可能需要引入外部CSS到Shadow DOM中,本文就介绍3种各有优缺点CSS import的方法,帮助大家更好地进行web components组件开发。
巧用两个type=range input实现区域范围选择
2021年02月11日,星期四type=range类型输入框UI自定义兼容性很好很实用,但是只是单值选择,有没有可能直接两个拖拽按钮实现范围选择呢?可以的,活用CSS即可,JS只需做一点微小的支持。
使用::part伪元素改变Shadow DOM的CSS样式
2021年02月6日,星期六详细介绍CSS ::part伪元素,以及和Shadow DOM中<slot>一起使用的细节知识,多个demo和截图,希望可以帮到您的学习。
CSS技术分享: 文字在圆形内沿着弧线边界排版
2020年04月9日,星期四HTML全局属性列表大全
2020年01月31日,星期五不是流水文档,每一个全局HTML属性都有专门demo页面研究测试其作用,干货和信息量非常大,请预留足够多时间阅读文本,你会学到很多HTML全局新特性。
HTMLUnknownElement与HTML5自定义元素的故事
2018年03月20日,星期二我之前以为写一个规范以外的标签元素就是自定义元素,后来发现不是的。HTMLUnknownElement与自定义元素并不能直接相等,甚至可以说是陌路两人。
W3规范中,对自定义元素的定义是中间必须要有短横线(就是键盘上的减号)连接,并且浏览器也是这么认为的……
DOM元素querySelectorAll可能让你意外的特性表现
2015年11月5日,星期四我们内容正如标题所示,就是介绍大家可能的对DOM元素querySelectorAll方法一些认知不清楚的地方。没有Demo页面,但是有源代码,有截图。本文内容还行,浅显易懂,也容易消化和吸收,算是不错的tips知识get点。
伪元素表单控件默认样式重置与自定义大全
2013年06月7日,星期五所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。