Framework Integration
You have the flexibility to use Web Components with any other framework of your choice. Whether your web page is built with Angular, React, Vue, WordPress, Typo3, or any other framework, you can seamlessly integrate Web Components into your existing setup. The reason is that all these frameworks have the ability to load JavaScript files and render HTML, which is the only requirement for using Web Components.
Angular
As Angular does not recognize the web components as Angular components, you need to set the schema of the Angular module where you intend to use the web components to the CUSTOM_ELEMENTS_SCHEMA.
WordPress (and other website builder tools)
In the context of WordPress, many users employ page builder addons such as Divi, Elementor, Gutenberg, Brizy, etc., to enhance the design and functionality of their websites. To seamlessly integrate Web Components into pages built with these addons, each addon offers a specific building block designed for this purpose. These building blocks are typically named "HTML widget," "Code block," or something equivalent.
Below is a curated list of the building blocks provided by popular WordPress page builder addons:
| Addon | Building Block |
|---|---|
| Brizy | Embed |
| Divi | Code Module |
| Elementor | HTML Widget |
| Gutenberg | Custom HTML |
| Oxygen | Code Block |
| Visual Composer | Raw HTML Element |
| WP Bakery | Raw HTML |
Many page builders offer a "Code Highlight" block, but it's essential to understand that this block merely displays code with colors on the website. It doesn't execute the code. Be aware of this distinction for accurate usage.
If you're using the WordPress Classic Editor (also called the TinyMCE editor) you can only use its "Text" and not "Visual" editor mode. The visual editor mode removes any unknown tags to it.
It's recommended to use Gutenberg (default WordPress editor since WordPress 5.0) and its Custom HTML block instead.