A Web Component is a self-contained native component that runs within a shadowed scope in the DOM.
For the same reason, it is rather incovenient to bundle static files with the Web Component itself.
In order to use images or graphic, there are two options:
- Serve the images, and reference it in a url:
<img src="https://some-cloud/some-image.png" />
- Use SVG: You can import SVG-files into the component. React will render these as SVG Elements inside the React App instead of loading them at runtime.
For development, you can serve the bundle file.
Simply start the dev-server by using
The bundle will be served on:
The Web Component will run inside a shadow DOM.
However, sometimes that's not really what we want.
In order to disable the shadow-root entirely, simply set the
useShadow property to
false in the configuration.
In order to support IE 11, you will need to import the necessary polyfills.
Start by installing
Now add the polyfills to
If you want to use IE 11 during development, add 'IE 11' to
In order to make the Direflow Components work offline, we need to disable lazyloading of the Web Component polyfills and the React modules.
⚠️ Be aware that this will introduce a significantly larger bundle size.
First, we disable lazyloading of
ReactDOM dependencies by altering the
Next, we disable lazyloading of the Web Component polyfills by using the
Add this plugin to any Direflow Component that needs to function offline.
We now want to install these polyfills as a part of the setup:
Then go to your index-file (where you configure the Direflow Components), and at the very top of the file, add these imports: