# build-in custom element polyfill

**Repository Path**: zhangxinxu/build-in-custom-element-polyfill

## Basic Information

- **Project Name**: build-in custom element polyfill
- **Description**: 本项目适用于支持匿名自定义元素，但是不支持内置自定义元素的浏览器场景，主要就是Safari浏览器。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-04-23
- **Last Updated**: 2021-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 内置自定义元素的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浏览器已经是内置自定义元素了。

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