自定义HTML元素不自动继承display等流式CSS属性，因这些属性本身不可继承；应通过display:contents、外部CSS控制或CSS变量等方式使其融入父容器布局流。
自定义 HTML 元素本身不会“自动继承”父类的流式属性描述符（如 display、width、margin 等），因为这些属性在 CSS 中**本就不具备继承性**——它们属于布局类属性，浏览器规范明确不参与继承链。所谓“通过继承行为让自定义元素获得”，实际是指：在封装自定义元素时，主动使其表现符合流式上下文，而非依赖 CSS 继承。
理解前提：流式属性不可继承，但可被影响
CSS 中只有少数属性（如 color、font-family、text-align）默认继承；display、float、position、margin、padding、width 等全部不可继承。即使你写 div { display: flex; } → <custom-el> { display: inherit; }</custom-el>，display: inherit 也无效（规范中 display 的 inherit 值虽合法，但因父元素的 display 值不参与继承，实际计算为 initial，即 inline）。
真正可行的方式：用 display: contents 或 host selector 控制外层流行为
要让自定义元素自然融入父容器的流式布局（比如在 Flex 容器中自动成为 flex item，或在 Grid 中成为 grid item），关键不是“继承 display”，而是确保它不打断文档流，并允许父级布局引擎识别它为有效子项：
- 若使用 Shadow DOM，可在
:host上显式设置display: contents（需注意兼容性）——这会让自定义元素自身“消失”于布局树中，其子节点直接参与父容器的流式计算 - 不启用 Shadow DOM 时，自定义元素默认是
display: inline，可通过外部 CSS 直接控制：my-button { display: block; }或.container > my-button { display: flex; } - 若需响应式适配，推荐在自定义元素内部通过
connectedCallback检查父容器computedStyleMap()或监听ResizeObserver，再动态设置内部 shadow root 的布局方式
表单类自定义元素需额外处理内置流行为
当扩展原生元素（如 <input is="smart-input">），它天然继承原生 input 的显示语义（display: inline-block）。此时无需手动干预 display，但要注意：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 避免在
constructor中覆盖this.style.display，否则可能破坏表单控件默认尺寸与对齐 - 如需支持
width: 100%等流式宽度，应在connectedCallback中检查父容器是否设置了width，再将该计算值同步到内部<input>元素上 - 对
label关联等语义行为，必须保留原生属性映射（如this.setAttribute('for', ...)），否则辅助技术无法正确解析流式上下文中的角色关系
避免常见误区：inherit 不适用于 layout 属性
不要在自定义元素样式中滥用 display: inherit、width: inherit 或 margin: inherit。它们要么无效（display），要么取的是父元素的计算值快照（如父 width: 80% 计算为 640px，子元素 width: inherit 就固定为 640px，不再随父缩放）。
更稳健的做法是：用 CSS 自定义属性传递上下文，例如父容器设 --flow-width: 100%;，自定义元素内写 width: var(--flow-width); —— 这样既保持响应性，又不依赖继承机制。
