<h1>Styled web components</h1>
  <h2>Box demo</h2>
  <fw-box width="500px" py="2em" color="red" bg="yellow" font-family="sans-serif">
    <h3>Hello world</h3>
  </fw-box>

  <h2>Flex box demo</h2>
  <fw-flex justify-content="center" flex-direction="row-reverse">

    <fw-box m="1em" width="500px" py="2em" color="red" bg="yellow" font-family="sans-serif" text-align="center">
    <h3>Section 1</h3>
  </fw-box>
  <fw-box m="1em"  width="500px" py="2em" color="red" bg="yellow" font-family="sans-serif" text-align="center">
    <h3>Section 2</h3>
  </fw-box>
  </fw-flex>

  <h2>Custom card component</h2>
  <my-card border-radius="20px" bg="yellow" size="200px" p="1em" border-x="2px solid red">
    <h3>Card Heading</h3>
  </my-card>

  

  <h2>Grid demo</h2>
  <fw-box m="2em">
  <fw-grid grid-template-columns='100px 100px 100px' grid-gap="10px">
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">A</fw-box>
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">B</fw-box>
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">C</fw-box>
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">D</fw-box>
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">E</fw-box>
    <fw-box bg="#444" color="#fff" border-radius="5px" p="20px" font-size="150%">F</fw-box>
  </fw-grid>
  </fw-box>



import { 
  SpaceProps, 
  ColorProps, 
  TypographyProps, 
  LayoutProps, 
  FlexboxProps,
  BorderProps,
  GridProps,
} from 'https://unpkg.com/@rajasegar/styled-web-components@1.0.0/dist/styled-web-components.min.js'


const Box = GridProps(BorderProps(LayoutProps(TypographyProps(ColorProps(SpaceProps(HTMLElement))))))

class FWBox extends Box {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    const template = document.createElement('template')
    template.innerHTML = '<div><slot></slot></div>'
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.container = this.shadowRoot.querySelector('div')
  }
}

customElements.define('fw-box', FWBox)

class FWFlex extends FlexboxProps(HTMLElement) {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    const template = document.createElement('template')
    template.innerHTML = '<div><slot></slot></div>'
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.container = this.shadowRoot.querySelector('div')
    this.container.style.display = 'flex'
  }
}

customElements.define('fw-flex', FWFlex)

class FWGrid extends GridProps(HTMLElement) {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    const template = document.createElement('template')
    template.innerHTML = '<div><slot></slot></div>'
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.container = this.shadowRoot.querySelector('div')
    this.container.style.display = 'grid'
  }
}

customElements.define('fw-grid', FWGrid)

class MyCard extends ColorProps(BorderProps(LayoutProps(SpaceProps(HTMLElement)))) {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' })
    const template = document.createElement('template')
    template.innerHTML = '<div><slot></slot></div>'
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.container = this.shadowRoot.querySelector('div')
  }
}

customElements.define('my-card', MyCard);

class BlockText extends TypographyProps(HTMLElement) {
constructor() {
    super();

    this.attachShadow({ mode: 'open' })
    const template = document.createElement('template')
    template.innerHTML = '<p><slot></slot></p>'
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.container = this.shadowRoot.querySelector('p')
  }
}

customElements.define('block-text', BlockText);

class Avatar extends BorderProps(HTMLImageElement) {
  constructor() {
    super()
    this.container = this;

  }
}

customElements.define('fw-avatar', Avatar, { extends: 'img' })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.