customelements.define()注册自定义元素时标签名必须含短横线，如file-uploader；connectedcallback中须调用attachshadow创建shadow dom；拖拽文件夹需手动递归读取，仅chromium完整支持，firefox不支持webkitgetasentry，safari有路径限制。

customElements.define() 注册时标签名必须含短横线

浏览器会直接拒绝注册如 fileupload 这样的标签名，报错 DOMException: Failed to execute 'define' on 'CustomElementRegistry'。必须用连字符分隔，比如 file-uploader、drop-zone。这是 HTML 规范硬性要求，不是可选项。

connectedCallback 里不调用 attachShadow 就没 Shadow DOM

很多封装者把结构直接写进 this.innerHTML，结果样式泄露、事件监听失效、:host 伪类不生效——根本原因是没走 Shadow DOM 流程。正确做法是在 connectedCallback 中执行：this.attachShadow({ mode: 'open' })，再往 this.shadowRoot 插入模板和样式。漏掉这步，组件就只是个普通 div 壳子。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

拖拽文件夹必须手动递归读取，且仅 Chromium 支持完整能力

给 <input type="file"> 加 webkitdirectory 属性，只对点击触发有效；拖拽时浏览器不会自动展开目录树。必须监听 drop 事件，对每个 DataTransferItem 调用 item.webkitGetAsEntry()，再用 createReader().readEntries() 递归遍历。但要注意：

• Firefox 完全不支持 webkitGetAsEntry
• Safari 对目录读取有路径限制（比如不能跨根目录）
• 必须在 dragover 里调用 e.preventDefault()，否则 drop 事件根本不会触发

accept 属性同步和 JS 校验是两回事

accept 只控制原生文件选择器的过滤界面，用户仍可手动改后缀绕过。自定义组件里需做两层处理：

• 在 attributeChangedCallback 中同步更新内部 <input> 的 accept 属性
• 在 change 或 drop 后，用 file.type 和 file.name.match(/\.[^\.]+$/) 做二次校验
• 大小校验也一样：不能只靠 input 的 max（它不存在），得用 file.size 手动比对

拖拽上传的兼容性边界很窄，实际项目中建议明确 fallback 策略：Chromium 内核走完整文件夹递归，其他浏览器降级为单层文件列表 + 显式提示“暂不支持文件夹拖拽”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！