不能在html模板里写onclick或oninput，因为会破坏结构与逻辑的隔离，导致全局作用域依赖、隐式耦合、模块作用域函数无法访问、多组件行为混乱、服务端渲染hydration失败；应使用template标签声明纯净结构，通过javascript在shadowroot中动态绑定事件，并用customevent通信。
为什么不能在 HTML 模板里写 onclick 或 oninput
因为那等于把逻辑契约硬编码进结构层，破坏运行时隔离。浏览器解析 onclick="runCode()" 时，会尝试在全局作用域找 runCode，一旦函数没挂到 window 上，就静默失败；更糟的是，它让编辑器、预览区、控制台三者之间产生隐式依赖——你改了函数名，HTML 里漏改一处，整个链路就断。
常见错误现象：
-
onclick调用的函数在模块作用域内定义（比如 ES6 module 里的const runCode = () => {}），结果点击无响应 - 多个组件共用同一份模板字符串，但各自需要不同行为，只能靠
data-action+ 外部 switch 判断，越积越多越难维护 - 服务端渲染后，客户端 hydration 阶段无法复用这些内联事件，导致首屏交互失效
template 标签 + content API 是解耦起点
真正可控的模板不是字符串拼接，而是用原生 <template></template> 声明结构，再用 JavaScript 控制注入时机和数据绑定。它天然不执行脚本、不发起请求、不触发事件，只提供纯净 DOM 片段。
实操要点：
- 把按钮、输入框等交互元素放进
<template id="editor-ui"></template>，不带任何onclick、oninput - 在自定义元素的
connectedCallback中调用document.getElementById('editor-ui').content.cloneNode(true)插入this.shadowRoot - 插入后立即用
this.shadowRoot.querySelector('button').addEventListener('click', this.handleRun.bind(this))绑定，this指向组件实例，可直接访问私有状态 - 禁止对克隆出的节点再设
onclick属性——那是倒退回内联模式
事件分发必须绕过 HTML 层，走 CustomEvent + document
模板只管渲染，行为由组件类控制；而组件之间通信不能靠 DOM 查找或回调传参，得用事件总线级轻量机制。这里 CustomEvent 是唯一不需要第三方库、且能被所有现代浏览器原生支持的方案。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键约束条件：
- 只往
documentdispatch，不依赖具体父容器 ID：document.dispatchEvent(new CustomEvent('editor:run', { detail: { code: 'console.log(1)', lang: 'js' } })) -
detail必须是纯对象，不能是字符串、null或 DOM 节点——否则跨 iframe 时序列化失败，控制台收不到 - 监听方必须在
connectedCallback里注册，且用{ once: false }（默认就是 false），避免漏掉首次事件 - 命名加前缀，如
'editor:run'、'console:log'，防止跟第三方库事件冲突
Web Components 的 shadowRoot 是最后防线
即使用了模板和事件，如果没启用 Shadow DOM，样式和事件仍可能被外部干扰。比如别人在全局写了 button { display: none }，你的编辑器按钮就消失了；或者监听了 document.addEventListener('click') 并调用了 stopPropagation()，你的按钮点击事件就被截断。
必须做到：
- 在
constructor里调用this.attachShadow({ mode: 'open' })，不是在connectedCallback - 所有模板内容都 append 到
this.shadowRoot，而不是this（后者会进入 light DOM） - 事件监听也绑在
this.shadowRoot上，例如this.shadowRoot.addEventListener('click', ...)，而非this或document（除非是跨组件广播） - 禁止在模板中写
<button onclick="..."></button>或<div data-action="..."> —— 这些都是给外部 JS 留的后门，违背封装原则 <p>最易被忽略的一点：模板里写的 <code><slot></slot>是透传入口，一旦放进去的内容含内联事件，解耦就前功尽弃。所以<slot></slot>只接受纯展示内容，交互逻辑必须由组件自身控制。
