https://github.com/vardius/web-component

Lightweight library providing interface for building web components
https://github.com/vardius/web-component

shadowroot web-component web-components webcomponents

Last synced: 8 months ago
JSON representation

Lightweight library providing interface for building web components

• Host: GitHub
• URL: https://github.com/vardius/web-component
• Owner: vardius
• License: mit
• Created: 2017-05-07T06:02:53.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T19:50:17.000Z (about 3 years ago)
• Last Synced: 2025-05-14T06:54:17.124Z (9 months ago)
• Topics: shadowroot, web-component, web-components, webcomponents
• Language: JavaScript
• Homepage:
• Size: 754 KB
• Stars: 37
• Watchers: 3
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# web-component

[![Build Status](https://travis-ci.org/vardius/web-component.svg?branch=master)](https://travis-ci.org/vardius/web-component)

[![codecov](https://codecov.io/gh/vardius/web-component/branch/master/graph/badge.svg)](https://codecov.io/gh/vardius/web-component)

[![npm version](https://img.shields.io/npm/v/web-component.svg)](https://www.npmjs.com/package/web-component)

[![npm downloads](https://img.shields.io/npm/dm/web-component.svg)](https://www.npmjs.com/package/web-component)

[![license](https://img.shields.io/github/license/vardius/web-component.svg)](LICENSE.md)

Lightweight library providing interface for building [web components](https://www.webcomponents.org/).

## Contribution

Is *web-component* library missing something ?

No problem! Simply [fork](https://github.com/vardius/web-component/network#fork-destination-box) this repository, [add middleware](https://github.com/vardius/web-component/wiki/Middleware) and create pull request.

## Installation

```bash

npm install --save web-component

```

## [Documentation](https://github.com/vardius/web-component/wiki)

Package provides a `decorator` function that allows you to:

- easy define [Custom Elements](https://www.webcomponents.org/introduction#custom-elements)

- styling a custom element

- creating elements from a template

- encapsulate style and markup using [Shadow DOM](https://www.webcomponents.org/introduction#shadow-dom)

- extending other custom elements or even the browser's built-in HTML

```javascript

import { WebComponent } from 'web-component'

@WebComponent('hello-world', {

  template: require('./hello-world.html'),// provide template

  styles: require('./hello-world.css'), //provide styles

  extends: 'button', //default does not extends any

  shadowDOM: true, //default false

  mode: "open" // default open, set to closed to block access to shadowDOM

})

export class HelloWorld extends HTMLElement {}

```

If *_shadowDOM_* option is set to `true` then *_template_* and *_styles_* will be attached to [shadowRoot](https://w3c.github.io/webcomponents/spec/shadow/#concept-shadow-root). If there is no *_shadowRoot_*, it will be created with [mode](https://w3c.github.io/webcomponents/spec/shadow/#dom-shadowroot-mode) `open`.

1. [Hello World Example](https://github.com/vardius/web-component/wiki/Hello-World-Example)

2. [web-components-webpack-es6-boilerplate](https://github.com/vardius/web-components-webpack-es6-boilerplate)

## License

The code is available under the [MIT license](LICENSE.md).