https://github.com/aegisjsproject/component

Base component using `@shgysk8zer0/aegis` & `@shgysk8zer0/aegis-styles`
https://github.com/aegisjsproject/component

aegis constructable-stylesheets custom-elements sanitizer-api security web-components

Last synced: 3 months ago
JSON representation

Base component using `@shgysk8zer0/aegis` & `@shgysk8zer0/aegis-styles`

• Host: GitHub
• URL: https://github.com/aegisjsproject/component
• Owner: AegisJSProject
• License: mit
• Created: 2024-02-05T02:47:34.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-04-30T14:15:43.000Z (8 months ago)
• Last Synced: 2024-05-02T03:03:05.998Z (8 months ago)
• Topics: aegis, constructable-stylesheets, custom-elements, sanitizer-api, security, web-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@aegisjsproject/component
• Size: 378 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# `@aegisjsproject/component`

Base component using [`@aegisjsproject/core`](https://github.com/AegisJSProject/core)

& [`@aegisjsproject/styles`](https://github.com/AegisJSProject/styles).

[![CodeQL](https://github.com/AegisJSProject/component/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/AegisJSProject/component/actions/workflows/codeql-analysis.yml)

![Node CI](https://github.com/AegisJSProject/component/workflows/Node%20CI/badge.svg)

![Lint Code Base](https://github.com/AegisJSProject/component/workflows/Lint%20Code%20Base/badge.svg)

[![GitHub license](https://img.shields.io/github/license/AegisJSProject/component.svg)](https://github.com/AegisJSProject/component/blob/master/LICENSE)

[![GitHub last commit](https://img.shields.io/github/last-commit/AegisJSProject/component.svg)](https://github.com/AegisJSProject/component/commits/master)

[![GitHub release](https://img.shields.io/github/release/AegisJSProject/component?logo=github)](https://github.com/AegisJSProject/component/releases)

[![GitHub Sponsors](https://img.shields.io/github/sponsors/shgysk8zer0?logo=github)](https://github.com/sponsors/shgysk8zer0)

[![npm](https://img.shields.io/npm/v/@aegisjsproject/component)](https://www.npmjs.com/package/@aegisjsproject/component)

![node-current](https://img.shields.io/node/v/@aegisjsproject/component)

![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40aegisjsproject%2Fcomponent)

[![npm](https://img.shields.io/npm/dw/@aegisjsproject/component?logo=npm)](https://www.npmjs.com/package/@aegisjsproject/component)

[![GitHub followers](https://img.shields.io/github/followers/AegisJSProject.svg?style=social)](https://github.com/AegisJSProject)

![GitHub forks](https://img.shields.io/github/forks/AegisJSProject/component.svg?style=social)

![GitHub stars](https://img.shields.io/github/stars/AegisJSProject/component.svg?style=social)

[![Twitter Follow](https://img.shields.io/twitter/follow/shgysk8zer0.svg?style=social)](https://twitter.com/shgysk8zer0)

[![Donate using Liberapay](https://img.shields.io/liberapay/receives/shgysk8zer0.svg?logo=liberapay)](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")

- - -

- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)

- [Contributing](./.github/CONTRIBUTING.md)

## Example Component

```js

import { AegisComponent, TRIGGERS, SYMBOLS } from '@aegisjsproject/component';

import { html, css, appendTo, addStyles } from '@aegisjsproject/core';

const template = html`
Hello, World!
`;


const stlyes = css`

.foo {

  color: red;

}

`

export class HTMLHelloWorldElement extends AegisComponent {

  constructor() {

    super({ template, styles });

  }

}

HTMLHelloWorldElement.register('hello-world');

```