💻 Wrap your widget or microfrontend into isolated web component!
This package will wrap your app into web component. Automatically inlined all styles from your app into shadow root. Render your app into isolated shadow dom
- Install rollup-web-component-plugin using
npm install --save-dev rollup-web-component-plugin
- import plugin
import rollupWebComponentPlugin from 'rollupWebComponentPlugin'
- add to your config into plugins section
plugins: [rollupWebComponentPlugin(wrapperFn)]
- Pass wrapperFn, which include wrap logic. For Example:
function getTemplate(inlinedCss, app) {
return `
function init (tag) {
class MyWebComponent extends HTMLElement {
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = ${JSON.stringify(inlinedCss)};
shadowRoot.appendChild(style);
const mountPoint = document.createElement('div');
mountPoint.setAttribute('id', 'app')
shadowRoot.appendChild(mountPoint);
${app}.mount(mountPoint);
}
}
customElements.define(tag, MyWebComponent);
}`;
- In the place, when you will use your library - you will import { init } from 'myLibrary'
- init('my-web-component')
- Paste in your app
- Done
We'd love for you to contribute to rollup-web-component-plugin! Here's how:
- Fork the repository
- Clone your fork to your local machine
- Create a new branch
- Make your changes
- Commit your changes and push to your fork
- Create a pull request to the repository