HTML语义本身不提供跨框架交互能力，真正交互依赖JavaScript通信机制；iframe跨域需用postMessage并校验origin，shadow DOM需通过part/exportparts暴露接口，ARIA与data-属性可辅助状态同步但需双方语义一致。
HTML语义本身不提供跨框架（如 iframe 或 shadow root）的组件交互能力，它只负责结构表达；真正的交互必须依赖 JavaScript 通信机制，且语义标签只是让这些通信更可维护、更可访问。
iframe 跨域时 postMessage 是唯一可行路径
同源 iframe 可直接访问 window.contentWindow 和 DOM，但一旦跨域，浏览器会抛出 SecurityError: Blocked a frame with origin ... from accessing a cross-origin frame。此时必须用 postMessage 发送结构化数据，并在接收端用 message 事件监听。
- 发送方需明确指定
targetOrigin（不能写"*"，否则多数现代浏览器会静默丢弃消息） - 接收方必须校验
event.origin，防止伪造来源冒充 - 语义化作用体现在：消息体中用
type字段标识意图（如"NAVIGATE_TO_SECTION"），配合section、article等标签的id值，让接收方能精准 scrollIntoView 或 focus - 不要在消息里传 DOM 节点或函数——序列化会失败，只能传 plain object、string、number 等可克隆类型
shadow DOM 内部需靠 part + exportparts 暴露语义接口
自定义元素若封装了 shadow root，外部无法直接 querySelector 其内部 button 或 input。想让父级“按语义操作”，得主动暴露可交互部分：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 在 shadow 内给关键节点加
part="submit-button"，再在 custom element 定义中设置exportparts="submit-button:primary-action" - 外部 CSS 可用
::part(primary-action)样式化，JS 则通过element.shadowRoot.querySelector('[part="submit-button"]')获取（仅限同源） - 如果要支持跨 shadow 调用方法，必须在 element class 上显式定义 public method（如
focusInput()），而非依赖 DOM 查找 -
part名称应反映功能而非样式（比如用"search-input"而非"rounded-input"），否则语义断裂
ARIA role + data- 属性是跨框架状态同步的轻量方案
当两个框架（如主页面与嵌入的 widget iframe）需要共享 UI 状态（例如“当前展开的折叠面板”），又不想强耦合通信逻辑时，可用语义化元数据桥接：
立即学习“前端免费学习笔记（深入）”；
- 主页面在
details元素上设data-panel-id="faq-1"和open属性；widget iframe 通过window.parent.document（同源）或postMessage同步该值 - 用
role="region"+aria-labelledby明确标识可聚焦区域，使辅助技术能感知状态变化 - 避免把业务状态全塞进
data-属性——只放轻量标识符，具体数据仍走通信通道 - 注意：
data-属性变更不会触发 DOM 事件，监听方需用MutationObserver观察属性变化，或由通信方主动通知
真正难的不是怎么发消息，而是双方对“语义”的理解是否一致：同一个 data-panel-id 在不同框架里是否指向同一逻辑单元？是否共用同一套 ARIA 状态命名规范？这些约定比技术实现更容易出错，也更难调试。
