WebKit将非标标签（如<dev>）视为HTMLUnknownElement，按内联语义处理、不赋予默认样式，导致CSS宽高/背景/外边距失效，且W3C验证器报错“Element dev is not supported”。
WebKit如何处理这类非标标签
WebKit不会报错，也不会渲染为块级容器——它直接把.sitetitle { display: block; }能生效，但<dev class="sitetitle"></dev>在DOM中仍被当作HTMLUnknownElement，导致getComputedStyle()返回display: inline，背景、宽高、margin 全部失效。
- 非标准标签不进入“标准元素分类表”，不触发
display: block等默认行为 - 部分浏览器（如旧版Safari）会将其降级为纯文本节点，Chrome 则保留标签名但剥离语义
- 屏幕阅读器跳过
<dev></dev>，SEO 工具无法识别其结构意图 - W3C 验证器明确报错：
Element dev is not supported
为什么innerHTML += ''会彻底破坏DOM
每次赋值innerHTML都是一次全新解析，不继承前序状态。写el.innerHTML = '<dev><p>text';</p></dev>后，WebKit 解析器立刻启动容错重建：发现<dev></dev>无闭合、又遇到<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，而<p></p>不允许嵌套在未知元素中，于是强制隐式闭合<dev></dev>，再打开<p></p>——最终生成的 DOM 是<p>text</p>，<dev></dev>完全消失。
- 拼错标签名（如
<divv></divv>）和自定义标签（如<my-card></my-card>）处理逻辑不同：后者可注册为 Custom Element，前者直接丢弃 - 若后续再执行
el.innerHTML += ''，等于对已修正的 DOM 再次解析字符串，但此时上下文里没有开放的<dev></dev>栈，该字符串被忽略或转为文本 - 这种“二次解析失配”是调试中最难定位的问题之一：控制台 Elements 面板里根本看不到
<dev></dev>，但 JS 里还留着引用
WebKit的插入模式与开放元素栈如何决定补全行为
WebKit 不靠“猜测”，而是严格按 HTML Living Standard 的插入模式（如in body、in table）和开放元素栈（stack of open elements）运行。遇到<dev><p>hello</p>
<div>时，解析器先压入<code><dev></dev>，再压入<p></p>；当看到<div>，发现<code><p></p>不允许包含<div>，立即弹出栈顶<code><p></p>并插入隐式，再尝试将<div>插入当前上下文——此时<code><dev></dev>仍在栈中，但已脱离预期嵌套层级。
-
<dev></dev>不会触发任何隐式闭合规则，因为它不在规范定义的“特殊元素”或“格式化元素”列表中 - 栈清空只发生在 EOF 或遇到强制中断标签（如
