# @enhance-labs/custom-element-mixin

> Custom Element mixin that enables the reuse of single file components

Latest version **1.1.1-beta.8** (published 2023-10-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @enhance-labs/custom-element-mixin
pnpm add @enhance-labs/custom-element-mixin
yarn add @enhance-labs/custom-element-mixin
bun add @enhance-labs/custom-element-mixin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1-beta.8 |
| Published | 2023-10-23 |
| First published | 2023-09-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @dam |
| Maintainers | macdonst |

## Links

- npm: https://www.npmjs.com/package/@enhance-labs/custom-element-mixin
- Repository: https://github.com/enhance-dev/enhance-custom-element-mixin
- Homepage: https://github.com/enhance-dev/enhance-custom-element-mixin#readme
- Issues: https://github.com/enhance-dev/enhance-custom-element-mixin/issues
- npm.io page: https://npm.io/package/@enhance-labs/custom-element-mixin

## Recent versions

- 1.1.1-beta.8 (latest) — 2023-10-23
- 1.1.1-beta.7 — 2023-10-16
- 1.1.1-beta.6 — 2023-10-13
- 1.1.1-beta.5 — 2023-10-13
- 1.1.1-beta.4 — 2023-10-13
- 1.1.1-beta.3 — 2023-10-13
- 1.1.1-beta.2 — 2023-10-12
- 1.1.1-beta.1 — 2023-10-11
- 1.0.2-beta.1 — 2023-09-29

## README

# custom-element-mixin
Custom Element mixin that enables the reuse of single file components

## Install

`npm i @enhance-labs/custom-element-mixin`

## Usage

`/pages/index.html`

```html
<my-element heading="one"></my-element>
<script type="module" src="/_public/browser/index.mjs"></script>
```

`/elements/my-header.mjs`

```javascript

function MyHeader({ html, state  }) {
  const { attrs={} } = state
  const { heading='default' } = attrs
  return html`
    <style>
      :host {
        color: red;
      }
    </style>
    <h1>${heading}</h1>
  `
}

```

`/browser/index.mjs`

```javascript
import MyHeaderElement from './elements/my-header.mjs'
import BaseElement from '@enhance/base-element'
import TemplateMixin from '@enhance/template-mixin'
import CustomElementMixin from '@enhance/custom-element-mixin'

class MyHeader extends CustomElementMixin(TemplateMixin(BaseElement)) {
  constructor() {
    super()
    this.header = this.querySelector('h1')
  }

  render(args) {
    return MyHeaderElement(args)
  }

  static get observedAttributes() {
    return [ 'heading' ]
  }

  headingChanged(value) {
    this.header.textContent = value
  }
}
customElements.define('my-header', MyHeader)
```

---
_Source: https://npm.io/package/@enhance-labs/custom-element-mixin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._