不能直接用 customelements.define() 封装 navigator.clipboard.writetext()，因为该 api 必须在用户手势（如 click）上下文中调用，而 connectedcallback 等生命周期钩子不满足此条件，会抛出 notallowederror；正确做法是在 connectedcallback 中监听 click 事件，在事件处理函数中异步调用 writetext() 并做好错误处理、状态反馈与防重复点击。
为什么不能直接用 customElements.define() 封装 navigator.clipboard.writeText()
因为剪贴板 API 必须在用户手势（如 click）触发的上下文中调用，而自定义元素的生命周期钩子（如 connectedCallback）不是用户手势，直接在里面调用 navigator.clipboard.writeText() 会报 NotAllowedError: Write permission denied。你封装的不是“复制逻辑”，而是“复制触发器”——它必须把实际调用延迟到真实事件里。
如何让自定义元素安全绑定 click 并执行复制
核心是：在 connectedCallback 中监听自身 click，从属性或 slot 提取要复制的内容，并确保只在事件回调中调用 navigator.clipboard.writeText()。
-
text属性优先：支持<copy-button text="hello"></copy-button> - fallback 到 slot 文本：若没设
text，就取this.textContent或第一个文本节点（注意过滤空白） - 必须用
async+try/catch处理 Promise 拒绝，不能只靠.then() - 复制成功后建议临时修改 innerText 或加 class 提示，避免用户重复点击
示例实现：
class CopyButton extends HTMLElement {
connectedCallback() {
this.addEventListener('click', async (e) => {
e.preventDefault();
const text = this.getAttribute('text') || this.textContent.trim();
if (!text) return;
try {
await navigator.clipboard.writeText(text);
this.textContent = '已复制';
setTimeout(() => this.textContent = this.getAttribute('text') || this.textContent.trim(), 2000);
} catch (err) {
console.error('复制失败:', err.name);
}
});
}
}
customElements.define('copy-button', CopyButton);
在 Shadow DOM 中读取 slot 内容要注意什么
如果你用了 attachShadow({ mode: 'open' })，this.textContent 就拿不到 slot 里的内容了——得用 slot.assignedNodes() 手动提取。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- slot 默认是
<slot></slot>，内容会投射进 Shadow DOM，但不会自动出现在this.textContent里 - 必须显式查询
const slot = this.shadowRoot.querySelector('slot');，再调用slot.assignedNodes({ flatten: true }) - 遍历 nodes，用
node.nodeType === Node.TEXT_NODE过滤出纯文本，再trim()合并 - 别忘了检查是否为空，空字符串传给
navigator.clipboard.writeText()会直接 reject
兼容旧浏览器时要不要在自定义元素里 fallback 到 document.execCommand()
不推荐。Chrome 95+、Firefox 92+、Safari 13.1+ 都稳定支持 navigator.clipboard.writeText()；真正需要兼容 IE11 或老版 Edge 的项目，应该用 clipboard.js 这类成熟库，而不是在自定义元素里手写两套逻辑——临时 textarea 创建/聚焦/选中/移除的细节太多，容易出焦点丢失、屏幕阅读器干扰、CSP 拦截等问题。
如果真要兜底，只建议在全局加一层降级函数，由自定义元素调用，而不是把 execCommand 嵌进组件内部。
最常被忽略的是：自定义元素里没做 loading 状态控制，用户连点多次可能触发多个并发 Promise，导致提示错乱或剪贴板被覆盖。实际使用时，务必在 click 回调开头禁用按钮或加 loading class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
