Reading: Make a Native Web Component with Custom Elements v1 and Shadow DOM v1
This article is mainly talking about the web component standards which includes the HTML Templates, Shadow Dom and Custom Elements.
The author made a form component based on the web component’s
And with the Shadow Dom’s help, we can build the component that defines its internal structure, scoped CSS, and encapsulates your implementation details. It does not interact with the parent DOM. So the parent’s style and the script will not affect your component. And the component’s style or behavior will not affect the context in which it is used too. The component will be consistent across all instances of the component, wherever it is used.
Omi, a next generation web framework is made by Tencent had started to use the web component. At our projects, we mostly use React components. But in some areas, We can’t use React components because of some problems. I think we can use web components in these situation like meetings settings popup, add meeting button and some other string templates are used in Google and Office extensions. This can make the templates more reusable and easier to control.
In this demo, I try to refactor the meeting popup with web components.