Get startedPropertiesEventsStylingPluginsConfigurationAdditionalStatic filesServeShadow DOMIE 11 SupportOffline supportGuides & tipsContributingChangelog

Static files

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.

Serve

For development, you can serve the bundle file.
Simply start the dev-server by using

npm start

The bundle will be served on: http://localhost:3000/direflowBundle.js

Shadow DOM

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.

// src/cool-component/index.js
DireflowComponent.create({
component: App,
configuration: {
tagname: 'cool-component',
useShadow: false,
},
});

IE 11 Support

In order to support IE 11, you will need to import the necessary polyfills.

Start by installing

npm install abortcontroller-polyfill proxy-polyfill

Now add the polyfills to direflow-webpack.js:

const { webpackConfig } = require('direflow-scripts');
// IE 11 polyfills
function configWithIE11(config) {
config.entry = [
path.join(__dirname, 'node_modules', 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'),
path.join(__dirname, 'node_modules', 'proxy-polyfill'),
path.join(__dirname, 'node_modules', 'react-app-polyfill/ie11'),
path.join(__dirname, 'node_modules', 'react-app-polyfill/stable'),
...config.entry];
return config;
}
/**
* Webpack configuration for Direflow Component
* Additional webpack plugins / overrides can be provided here
*/
module.exports = (config, env) => ({
...configWithIE11(webpackConfig(config, env)),
// Add your own webpack config here (optional)
});

If you want to use IE 11 during development, add 'IE 11' to browserlist under development in package.json

"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"IE 11" // <- Add this line
]
},

Offline support

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 React and ReactDOM dependencies by altering the direflow-webpack.js file:

module.exports = (config, env) => ({
...webpackConfig(config, env, {
react: false,
reactDOM: false,
})
});

Next, we disable lazyloading of the Web Component polyfills by using the polyfill-loader plugins:

plugins: [
{
name: 'polyfill-loader',
options: {
use: {
sd: false,
ce: false,
adapter: false
}
}
}
]

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:

npm install @webcomponents/webcomponentsjs

Then go to your index-file (where you configure the Direflow Components), and at the very top of the file, add these imports:

import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';


→ Guides and tips