Integrate Custom Elements into React app
Web Components in React with support in all popular browsers, including IE 11
To be short and clear Custom Element is a HTML element that encapsulates your functionality on an HTML page. Web Components is a suite of different technologies allowing you to create reusable custom elements.
Quite a long time I’ve been thinking for creating a Web Components pattern library. The main question was, which framework to choose ❔ A company may have projects on a different frameworks and Web Components should have an opportunity to be integrated with any of them. Custom Elements right now is the best way to do that.
So, what I did first is started to investigate how it works, limitations and browser support 👮
Firefox, IE, Opera Mini not yet. Ok, maybe we have polyfills? Yes, we do 👍 We even have a couple libraries which helps us to build a web components. Who starts with a library if it does not know vanilla JavaScript 👲
☝️ Idea
Web Component should be simple, reusable, configurable and all apps have it. Tada, notification-service, already published and you may try to consume😉
🙉 Start
How to build Custom Element step by step, lifecycle hooks, props, attrs etc. you may find here.
In our case, we are going to communicate trough CustomEvent dispatcher as we initialize service ones and receive notifications from any place of an app. For that, we have connectedCallback when element is inserted to the DOM and disconnectedCallback. Moreover, we give an opportunity to rewrite custom styles. For that we use style-src property.
<notification-service style-src=”build/style.css”></notification-service>
🔧 Polyfills
As we are going to support all popular browsers, including IE 11 we definitely have to use polyfills.
What we need:
webcomponents-bundle.jscontains all of the web components polyfillscustom-elements-es5-adapter.jssupport ES6 class in Custom Elementcore-jsfor fixing Out of stack space issue in IE
🏆Integration
You can try how it works here 🚀
Build configurations: webpack.config.js, gulp task ( web_components_vendor)
Conclusion
I like Custom Elements so far and functionality which it provides. With different varieties of frameworks finally, you may start simply build truly reusable web components using nothing more than vanilla JS/HTML/CSS 😎 Hope all browsers is going to support Custom Elements soon. Happy coding! Have fun! 🕜
📃 Useful links
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
