@ajnauleau/custom-components
v1.0.10
Published
'Simple Custom Web Components for your Project'
Downloads
21
Maintainers
ajnauleauReadme
Custom Web Components
Make and style custom web components easily!
Installation
$ npm install --save @ajnauleau/custom-componentsStyle
First start out by adding css styles to your component:
import { Component } from '@ajnauleau/custom-components';
const Custom = Component.styled`
color: red;
background: black;
`;Extend
Extend your component by adding any valid HTML between template literals ``:
class WebComponent extends Custom {
constructor() {
super();
}
render() {
let world = 'world';
return (
`<div>
<p>hello ${world}</p>
<div>
`
)
}
}Render
Render your new web component and give it a custom name. REMEMBER! Web component names must use a hyphen (-).
customElements.define('custom-component', WebComponent);Result
Embed and link your javascript, then use your new custom component.
<html>
<body>
<custom-component>
</custom-component>
<script type="module" src="./index.js"></script>
</body>
</html>Summary
Here's the complete javascript file for your reference.
import Component from '@ajnauleau/custom-components';
const Custom = Component.styled`
color: red;
background: black;
`;
class WebComponent extends Custom {
constructor() {
super();
}
render() {
return (
`<p>hello</p>`
)
}
}
customElements.define('custom-component', WebComponent);Access Props
Attribute to Props, similar to React
Lifecycle
constructor()
render()
componentDidMount()
componentDidUpdate()
componentWillUnmount()