HTMLUnknownElement的使用

HTMLUnknownElement ‌是指那些在HTML规范中未被明确定义或不被支持的元素。当你在网页中使用一个未被浏览器识别的标签时,该标签就会被视为一个 HTMLUnknownElement 。例如,如果你写了一个标签<chanlaogui>,这个标签就是一个HTMLUnknownElement,因为HTML规范中并没有定义这个标签‌。

WebComponents API是比较高级复杂的标准化API,所以对于简单的网页可以不使用它,它与HTMLUnknownElement的相似之处是,都可以自定义一个全新的html标签名。

不同的是,

  • 未知元素 :如果浏览器遇到一个它不认识的 HTML 标签(例如 <my-custom-tag>),它会将其解析为 HTMLUnknownElement

  • 自定义元素 :如果你正确地使用 Custom Elements API 定义了一个自定义元素(例如 <my-element>),它就不会被视为 HTMLUnknownElement,而是会继承 HTMLElement 或其它特定的元素接口。

所以,对于简单的app项目,不需要定义再使用新的html元素了,直接使用HTMLUnknownElement就好了,直接在html中写新的标签比如<news>表示新闻版块。好处就是不需要定义id和class为news了,方便快捷。

兼容性

HTMLUnknownElement 在现代浏览器中广泛支持,但如果你使用自定义元素,请确保检查 Custom Elements API 的兼容性

虽然比较"反直觉"但是未知元素比自定义元素的兼容性还要好,可以放心大胆的使用。就是有些默认css样式需要设置,比如display:block;。经过我的多方考察和询问,使用HTMLUnknownElement确实没有任何问题,而且比webcomponent更方便,比如名词中不需要加连字符"-",想到一个单词就能用。只是要注意避开常见的原生html名就好了,很简单!

相关推荐
daidaidaiyu3 小时前
一文学习 工作流开发 BPMN、 Flowable
java
Z兽兽4 小时前
React@18+Vite项目配置env文件
前端·react.js·前端框架
SuniaWang4 小时前
《Spring AI + 大模型全栈实战》学习手册系列 · 专题六:《Vue3 前端开发实战:打造企业级 RAG 问答界面》
java·前端·人工智能·spring boot·后端·spring·架构
sheji34164 小时前
【开题答辩全过程】以 基于springboot的扶贫系统为例,包含答辩的问题和答案
java·spring boot·后端
A_nanda5 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
m0_726965985 小时前
面面面,面面(1)
java·开发语言
happymaker06265 小时前
web前端学习日记——DAY05(定位、浮动、视频音频播放)
前端·学习·音视频
~无忧花开~5 小时前
React状态管理完全指南
开发语言·前端·javascript·react.js·前端框架
xuhaoyu_cpp_java5 小时前
过滤器与监听器学习
java·经验分享·笔记·学习
LegendNoTitle6 小时前
计算机三级等级考试 网络技术 选择题考点详细梳理
服务器·前端·经验分享·笔记·php