1 Star 2 Fork 0

张鑫旭/build-in custom element polyfill

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

内置自定义元素的polyfill

介绍

本项目适用于支持匿名自定义元素,但是不支持内置自定义元素的浏览器场景,主要就是Safari浏览器。

核心代码源自:https://github.com/WebReflection/custom-elements-builtin 这个项目。

不过源项目代码并没有做浏览器区分,也是Chrome浏览器引入也会执行,这就会影响Chrome浏览器下的正常运行。

所以我就基于内置自定义元素独有的特性进行了目标浏览器的识别与区分,这样就算引入,也不会影响Chrome浏览器。

使用说明

直接引用项目中的 index.js 即可。

其他说明

本polyfill虽然可以让Safari浏览器支持内置自定义语法,但是和原生浏览器还是有区别的,主要区别在于组件的声明周期运行的时机上。

原生支持的浏览器,例如Chrome或者Firefox浏览器,组件初始化以及connectedCallback生命周期执行的时间更早,Safari浏览器滞后。

这就有可能导致,Chrome浏览器下完全OK的功能代码,在Safari浏览器下就会报错。

因此,此时,Safari浏览器下,目标元素还是普通元素,Chrome浏览器已经是内置自定义元素了。

想要解决这个问题,可以在组件编写的时候,预留依赖成功初始化的回调,保证功能代码执行的时候,目标元素已经是内置自定义元素了。

MIT License Copyright (c) 2021 张鑫旭 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

本项目适用于支持匿名自定义元素,但是不支持内置自定义元素的浏览器场景,主要就是Safari浏览器。 expand collapse
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/zhangxinxu/build-in-custom-element-polyfill.git
git@gitee.com:zhangxinxu/build-in-custom-element-polyfill.git
zhangxinxu
build-in-custom-element-polyfill
build-in custom element polyfill
master

Search