自定义元素怎么处理未定义时的样式降级与渐进增强-H5教程-PHP中文网

自定义元素需显式设 display: block（或 flex/grid）以避免降级为 inline 导致布局异常；须用标准语义标签包裹实现 sectioning root；html 结构与 css 必须独立可用，js 仅增强；命名须含连字符且符合 html5 规范。

自定义元素怎么处理未定义时的样式降级与渐进增强

自定义元素（如 <my-card></my-card>、<app-header></app-header>）在浏览器中不被识别为语义化标签，解析时会降级为无样式、无语义的通用容器。要让它在未定义或 JS 未加载时仍能正常显示，必须主动做样式与结构的渐进增强处理。

默认 display 是 inline，必须显式重置

浏览器对未知标签默认设 display: inline，即使你视觉上期望它是块级容器，也会导致内容塌陷、换行异常、margin 不生效等问题。

统一重置所有自定义标签为 display: block（或 flex、grid，按需）
推荐写法：
my-card, app-header, custom-section { display: block; }
避免逐个写，可用属性选择器批量匹配：
[is], [data-component] { display: block; }（适用于带 is 属性或自定义 data 属性的场景）

语义缺失不可靠，不能靠 role 替代结构行为

加 role="region" 或 role="article" 只影响辅助技术读取，不改变 DOM 结构逻辑、heading 层级计数、CSS 作用域或 querySelector 行为。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<my-article><h1>标题</h1></my-article> 中的 <h1></h1> 仍被整个文档视为最高级标题，不会形成独立章节
若需 heading 流程重置，必须用标准语义标签（<article></article>、<section></section>）包裹，再用自定义元素作为其子容器
不要依赖 role 实现 sectioning root 功能——这是浏览器内建规则，无法通过 ARIA 模拟

JS 未加载时的降级策略：HTML 优先，JS 增强

自定义元素通常依赖 customElements.define() 注册，若脚本失败、阻塞或禁用，标签将保持“裸容器”状态。此时 HTML 结构和 CSS 必须已能独立工作。

把核心内容和基础布局写在 HTML 内，不依赖 JS 渲染
用 <template></template> 或 hidden 隐藏高级交互区域，等 JS 就绪后再激活
可配合 !defined 类名做样式开关：
my-button:not(:defined) { opacity: 0.7; cursor: default; }（:defined 伪类只在注册后匹配）

兼容旧浏览器：避免下划线开头等非法命名

<_header></_header>、<html-2026></html-2026> 等非规范命名会被完全忽略，DOM 中生成孤立节点，父子关系断裂，SEO 和无障碍支持归零。

严格遵守 HTML5 标签名规则：小写字母开头，仅含字母、数字、连字符（-），且必须含连字符（如 <my-header></my-header>）
IE8 及更早版本不识别任何新语义标签，包括 <header></header>，需额外注入 document.createElement + CSS 重置
现代项目可忽略 IE8，但若需支持，建议用 html5shiv 或内联三行脚本保底