💻 currently not up to date - introduced json-generator and json-dispatcher, which is not documented yet 💻
⚠ Experimental ⚠ example that demonstrates how an autonomous custom element can be updated via JSON. I just wanted to write my first custom element and investigate how JSON can be used to initialize and update a webcomponent instead of writing dozens of attributes where some of them may not even result in a standard html attributes, or they may be kept synchronous with attributes on child-elements that the webcomponent created itself. A JSON update mechanism may not be appropriate for every application. This is especially intended for applications that receive data from a server and have no frontend logic in the browser.
The example is deliberately kept very minimalistic and consists of only a few files that are packed via gulp to the \dist folder. There is only a simple build stack just to ensure that this example runs in common browser. Yes, including IE11 😥
Not all browsers support all necessary specifications, so I recommend to use Google Chrome. For more information see caniuse.com
The example creates two autonomous custom elements and uses a ShadowDOM. It does not use templates yet, but I'll change that in near future.
You should have installed npm and gulp
git clone https://github.com/open-coding/webcomponents-json-example.gitnpm installnpm start
After the last command it should look like this:
PS repositories:\webcomponents-json-example> npm start
> webcomponents-json-example@2.0.0 start repositories:\webcomponents-json-example
> gulp
[00:24:56] Using gulpfile repositories:\webcomponents-json-example\gulpfile.js
[00:24:56] Starting 'default'...
[00:24:56] Starting 'copy'...
[00:24:56] Starting 'html'...
[00:24:56] Starting 'css'...
[00:24:56] Starting 'babel'...
[00:24:56] Finished 'html' after 580 ms
[00:24:56] Finished 'css' after 581 ms
[00:24:56] Version: webpack 4.35.3
Built at: 2019-07-15 12:24:56 AM
Asset Size Chunks Chunk Names
bundle.js 8.95 KiB 0 [emitted] main
Entrypoint main = bundle.js
[00:24:57] Finished 'babel' after 1.4 s
[00:24:57] Finished 'copy' after 1.4 s
[00:24:57] Starting 'run-server-and-watch'...
[00:24:57] Starting 'run-server'...
[00:24:57] Starting 'watch'...
[00:24:57] Starting 'connect'...
[00:24:57] Starting 'open'...
[00:24:57] Starting server...
[00:24:57] Server started http://localhost:8001
[00:24:57] LiveReload started on port 35729
[00:24:57] Running server
[00:24:57] Opening http://localhost:8001/ using the app iexplore
The gulp task copies all .css and .html files into a folder called dist. It also bundles all .js files with webpack and after that the JavaScript will be transpiled with babel. Then a server is started and the internet explorer is opened to view the example. You may change that configuration within gulpfile.js. All .css, .html and .js files in the src folder are watched and if they change they will be copied and transpiled (if it's a JavaScript file) again and the browser gets automatically reloaded.
Within the package.json there are only dev-dependencies for gulp, webpack-stream, babel and some of its plugins to get the build-chain running. I did add babel to get some features work that aren't supported in IE11:
I added the webcomponents/polyfills from a CDN directly into the index.html to get the webcomponents work in older browsers like IE11, that have no native support for that. Another polyfill that I added is for having the ability to add multiple classes to classList. It's also referenced directly from a CDN.