Style property primitives for Web components inspired by styled-system
MIT License
Style property primitives for Web components inspired by styled-system
npm install @rajasegar/styled-web-components
via CDN:
<script src="https://unpkg.com/@rajasegar/[email protected]/dist/styled-web-components.min.js"></script>
Create your own Custom element with composing props
import { SpaceProps, ColorProps, TypographyProps } from 'styled-web-components'
class SWBox extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
// This is very important, your template should have a style tag with :host selector
template.innerHTML = `<style>
:host { display: block; }
<style>
<slot></slot>`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-box', TypographyProps(ColorProps(SpaceProps(SWBox))))
Use your newly defined custom element in your HTML
<sw-box py="2em" color="red" bg="yellow" font-family="sans-serif">
<h1>Hello world</h1>
</sw-box>
import { FlexboxProps } from 'styled-web-components'
class SWFlex extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
template.innerHTML = `<style>
:host { display: flex; }
</style>
<slot></slot>`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-flex', FlexboxProps(SWFlex))
<sw-flex justify-content="center" flex-direction="row-reverse">
<sw-box m="1em" width="500px" py="2em" color="red" bg="yellow" font-family="sans-serif" text-align="center">
<h3>Section 1</h3>
</sw-box>
<sw-box m="1em" width="500px" py="2em" color="red" bg="yellow" font-family="sans-serif" text-align="center">
<h3>Section 2</h3>
</sw-box>
</sw-flex>
import { GridProps } from 'styled-web-components'
class SWGrid extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
template.innerHTML = `<style>
:host { display: grid; }
</style>
<slot></slot>`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-grid', GridProps(SWGrid))
<h2>Grid demo</h2>
<sw-box m="2em">
<sw-grid grid-template-columns='100px 100px 100px' grid-gap="10px">
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">A</sw-box>
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">B</sw-box>
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">C</sw-box>
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">D</sw-box>
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">E</sw-box>
<sw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">F</sw-box>
</sw-grid>
</sw-box>
For more examples, see the demo folder.