https://github.com/preactjs/preact-custom-element

Wrap your component up as a custom element
https://github.com/preactjs/preact-custom-element

custom-elements preact web-components

Last synced: 2 days ago
JSON representation

Wrap your component up as a custom element

• Host: GitHub
• URL: https://github.com/preactjs/preact-custom-element
• Owner: preactjs
• License: mit
• Created: 2016-07-18T20:05:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-07-24T06:53:51.000Z (6 months ago)
• Last Synced: 2024-10-29T15:23:07.746Z (3 months ago)
• Topics: custom-elements, preact, web-components
• Language: JavaScript
• Size: 979 KB
• Stars: 361
• Watchers: 10
• Forks: 52
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - preact-custom-element
• awesome-web-components - preact-custom-element - Generate/register a custom element from a preact component. (Libraries / Integrations)

README

        
# preact-custom-element

Generate/register a custom element from a preact component. As of 3.0.0, this library implements the Custom Elements v1 spec.

Previous versions (< 3.0.0) implemented the v0 proposal, which was only implemented in Chrome and is abandoned.

## Usage

Import `register` and call it with your component, a tag name*, and a list of attribute names you want to observe:

```javascript

import register from 'preact-custom-element';

const Greeting = ({ name = 'World' }) => (

  
Hello, {name}!

);


register(Greeting, 'x-greeting', ['name']);

```

> _**\* Note:** as per the [Custom Elements specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), the tag name must contain a hyphen._

Use the new tag name in HTML, attribute keys and values will be passed in as props:

```html

```

Output:

```html

Hello, Billy Jo!

```


### Prop Names and Automatic Prop Names

The Custom Elements V1 specification requires explictly stating the names of any attributes you want to observe. From your Preact component perspective, `props` could be an object with any keys at runtime, so it's not always clear which props should be accepted as attributes.

If you omit the third parameter to `register()`, the list of attributes to observe can be specified using a static `observedAttributes` property on your Component. This also works for the Custom Element's name, which can be specified using a `tagName` static property:

```js

import register from 'preact-custom-element';

// 

class Greeting extends Component {

  // Register as :

  static tagName = 'x-greeting';

  // Track these attributes:

  static observedAttributes = ['name'];

  render({ name }) {

    return 
Hello, {name}!
;

  }

}

register(Greeting);

```


If no `observedAttributes` are specified, they will be inferred from the keys of `propTypes` if present on the Component:

```js

// Other option: use PropTypes:

function FullName(props) {

  return {props.first} {props.last}

}

FullName.propTypes = {

  first: Object,   // you can use PropTypes, or this

  last: Object     // trick to define untyped props.

};

register(FullName, 'full-name');

```

## Related

[preact-shadow-dom](https://github.com/bspaulding/preact-shadow-dom)