你的前端框架要被 Web 组件取代了(15)

即将推出的 Edge 19 也将提供支持，在 iOS 和 Android 上的 Safari、Chrome 和 Firefox 也支持它。
对于旧版浏览器，可以通过以下方式安装 WebcomponentsJS polyfill：

npm install --save @webcomponents/webcomponentsjs
你可以加入 webcomponents-loader.js 文件，该文件将执行功能检测以仅加载必要的 polyfill。使用此 polyfill，你就可以使用自定义元素，而无需向源代码添加任何内容。但是，它不提供真正的作用域 CSS，这意味着如果你在不同的 Web Components 中具有相同的类名和 ID 并将它们加载到同一文档中就将发生冲突。此外，Shadow DOM CSS 选择器：host() 和：slotted() 可能无法正常工作。
为了使其正常工作，你需要使用 Shady CSS polyfill，这也意味着你必须（稍微）调整你的源代码才能使用它。我个人不喜欢这样，所以我创建了一个 webpack 加载器处理这个问题。你需要用它来做转换，但这样就不用改代码了。
Webpack 加载器做了三件事：它为你的 web 组件的 Shadow DOM 中所有不以:: host 或:: slotted 开头的 CSS 规则添加元素标签名称前缀，从而提供正确的范围；之后它会解析所有:: host 和:: slotted 规则，以确保它们也能正常工作。
示例 1：lazy-img我创建了一个 Web 组件，一旦它在浏览器的可视端口中完全可见，就会平缓地加载一张图像。你可以在Github上找到它。
该组件的主要版本将本机<img>标签包装在<lazy-img>自定义元素中：
<lazy-img src="path/to/image.jpg" width="480" height="320" delay="500" margin="0px"></lazy-img>
repo 还包含 extend-native 分支，其中包含使用 is 属性扩展原生<img>标签的 lazy-img：
<img is="lazy-img" src="path/to/img.jpg" width="480" height="320" delay="500" margin="0px">
这是关于原生 Web Components 功能的一个很好的例子：只需导入 JavaScript 文件，添加 HTML 标签或使用 is 属性扩展本地标签就可以干活了！