PillarJS is a "batteries included" JavaScript library for writing smart reusable [Web Components](https://www.webcomponents.org/introduction) in a modern way.
Inspired by React components PillarJS provides familiar state management mechanisms and Virtual DOM, while also providing all of the sweetness of Web Components like Shadow DOM, "by-definition" server side rendering and ability to render from template tags and strings.
# Shortcuts
1. [Getting started](#getting-started)
1. [Using stateless components](#stateless-components)
1. [Options](#options)
1. [Using JSX](#jsx)
1. [Browser support](#browser-support)
1. [FAQ](#faq)
# Getting Started
Getting started is simple:
**Step 1.** Import PillarJS:
```javascript
import Pillar from 'pillarjs';
```
**Step 2.** Create your component:
```jsx
class SuperHeader extends Pillar {
render(props) {
return (
{props.text}
It's Superpowered!
);
}
}
```
Looks familiar? Pillar components are written in the exact same way as React components.
_**Note:** Because Pillar uses [Preact](https://github.com/developit/preact) for rendering JSX, `props` and `state` are passed as arguments to the `render()` method for convenient destructuring. You can still use `this.props` and `this.state` if you want to, but it's not required._
**Step 3.** Register your custom tag:
```javascript
Pillar.register(SuperHeader, 'super-header');
```
Second argument is an optional tag name. If not set, component name converted to dash-case will be used.
**Step 4.** Use it!
```html
```
And you're good to go! Custom tag's attributes will be passed to `this.props` in your component and resulting HTML on the page will be:
```html
This is not a simple header!
It's Superpowered!
```
### Can I use stateless components?
Yes, you can! The above class example can be trimmed down to this:
```jsx
const SuperHeader = ({ text }) => (
{text}
It's Superpowered!
);
```
### Options
A third argument passed to `Pillar.register` is an options object:
```javascript
{
useShadow: 'open' || 'closed',
allowScripts: true // Template render only
}
```
**`useShadow`** option enables Shadow DOM. Pass **open** for open mode and **closed** for closed. See the difference [here](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode).
**`allowScripts`** By default, all `