Don’t Reinvent The Wheel! Use White-Label Web Components

Look different, but work alike… Implement twice?

Setup a development environment and install our dependencies

Our base component will be the basic input. Create a new folder named white-label-web-components for our projects, run

npm init
npm i --save @lion/input
Small set of node_modules for Lion components
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White-Label Web Components</title>
</head>
<body>
<form>
<lion-input name="firstName" label="Input label"></lion-input>
</form>
<script type="module" src="main.js"></script>
</body>
</html>
import '@lion/input/lion-input.js';
npm i —-save-dev es-dev-server
{
"scripts": {
...
"serve": "es-dev-server --app-index index.html --node-resolve --watch --open" }
}
}
import { LionField } from '../../form-core/index.js'; 
import { LionField } from '@lion/form-core';
Rewritten paths in your source code
The line in the original source file.

Extend a Lion component to apply some styling

Now that we see the lion-input in the browser, let’s create a brushed up version. First subclass LionInput, the base class of lion-input web components: Create a file pretty-input.js on the top level of your project, next to index.html and main.js.

import { css } from 'lit-element';
import { LionInput } from '@lion/input';
export class PrettyInput extends LionInput {static get styles() {
return [
super.styles,
css`:host{
font-family:Segoe UI WestEuropean,Segoe UI,
-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,
sans-serif;
-webkit-font-smoothing:antialiased;
display: inline-block;
min-width:300px
}
::slotted(input:focus) {
border: 1px solid #33C3F0;
outline: 0;
}
::slotted(label) {
display: block;
margin-bottom: .5rem;
}
::slotted([slot=help-text]){
font-style: italic
}
::slotted(input) {
height: 38px;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}`
];
}
}customElements.define('pretty-input', PrettyInput);
//main.js
import '@lion/input/lion-input.js';
import './pretty-input.js';
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<meta name="viewport” content=”width=device-width, initial-scale=1.0">
<title>White-Label Web Components</title>
</head>
<body>
<form>
<lion-input name="firstName" label="Input label"></lion-input>

<pretty-input name="prettyInput" label="Pretty Input" >
<div slot="help-text">This looks much nicer</div>
</pretty-input>

</form>
<script type="module" src="main.js"></script>
</body>
</html>
Isn’t that pretty — the second one of course.

Create a bundle to use the styled component elsewhere

Bundling is a topic for itself. Most of you will know Rollup, Webpack, Parcel, and other, but you might not have used them directly. When you start your LitElement projects using the Javascript / Typescript starter projects mentioned above, a bundler is already included.
For those of you not familiar to bundler: a bundler takes the sources of your web project, gathers all dependent scripts that are required, imported or referenced by script tags, deduplicates code, wrangels them all up and outputs a single Javascript file to be included in the production version of your code.

npm install rollup
npm install --global rollup
npm install --save-dev rollup-plugin-node-resolve
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'main.js',
output: {
file: 'bundle.js',
format: 'cjs'
},
plugins: [
resolve({
browser: true,
only: [ /^@lion\/.*$/ ]
})
]
}
rollup --config

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
OneBitAhead

OneBitAhead

The tech staff of OneBitAhead GmbH, putting the web stack to work. Here to discuss daily bits & bytes. #javascript #nodejs #webcomponents #rdbms #php