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

Look different, but work alike… Implement twice?

The examples in the Lion docs are bare minimum — based on the assumption that you have a suitable development environment ready. We will get into more detail here.

Setup a development environment and install our dependencies

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

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>

You can find more about styling, e.g. about reuseable styles, in the LitElement docs.

Isn’t that pretty — the second one of course.

Create a bundle to use the styled component elsewhere

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