Third-Party Web Components — Known Issues & Guidelines

同学们，今天我们来聊聊 Lightning Web Components 开发者指南中一个非常实用的部分——测试版功能。在使用这些测试版功能的时候，有一些已知问题和必须遵守的指南，我们一条一条来看。 首先，通过加载脚本不支持 ECMAScript 模块，也就是我们常说的 ES 模块。所以你只能使用预先打包好的 IIFE 或者 UMD 格式的脚本。简单说，就是不要直接加载那种用 import 和 export 的现代 JS 文件，得用已经打包成传统格式的。 其次，由于 LWC 本身不支持 npm 导入，凡是有依赖关系的基于 npm 的组件，就没法直接用了。如果你想用第三方库，得先把它转换成单个文件，并且不能带 npm 的模块依赖。 接着看，在影子的多姆里，基于 ID 的元素引用会失败。因为组件默认是封闭的，无法访问全局的 document 对象。所以别想着用 document.getElementById 去获取影子多姆里的元素，得用组件内部的模板引用。 另外，Experience Builder 站点不支持 LWS 的第三方组件。就是说，如果你在 Experience Cloud 里搭建网站，暂时不能用轻量级服务（LWS）的第三方组件。 还有，自定义内置元素，也就是用 extends 继承原生 HTML 元素的写法，是不支持的。只能创建独立的自定义元素。 关于数据传递，默认情况下，属性值只会作为 attribute 存在，前提是这个属性已经被定义过。插槽（slot）功能是有效的，但合成阴影插槽不能用。只支持根模板上的标签，其他标签如果需要，得用 addEventHandler 来手动添加事件处理。 事件名称必须严格按照 RST 规范来命名，不能随意取。如果你想监听属性变化，要用 deliveredCallback 或者 attributeChangedCallback 方法，来获取那些需要反应的属性。 另外，不支持动态创建组件，也就是说，不能像以前那样在运行时用代码 new 出一个组件实例。还有，注册时机对于接收动态值非常关键，如果注册晚了，可能就拿不到初始的动态值了。 好了，这些就是关于测试版功能的主要注意事项。理解了这些，你就能更好地避开坑，把 LWC 用得顺顺利利。我们下节课见！