{"repo":"preactjs/preact-custom-element","free":true,"listed":false,"github":"https://github.com/preactjs/preact-custom-element","clone":"git clone https://github.com/preactjs/preact-custom-element.git","description":"Wrap your component up as a custom element","language":"JavaScript","stars":402,"topics":["preact","custom-elements","web-components"],"license":"MIT","category":"ui-components","readme_excerpt":"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 ( , and a list of attribute names you want to observe: Note: as per the Custom Elements specification, the tag name must contain a hyphen. Use the new tag name in HTML, attribute keys and values will be passed in as props: Output: Observed Attributes The Custom Elements v1 specification requires explicitly listing the names of attributes you want to observe in order to respond when their values are changed. These can be specified via the third parameter that's passed to the register() function: 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: If no observedAttributes are specified, they will be inferred from the keys of propTypes if present on the Component: Passing slots as props The register() function also accepts an optional fourth parameter, an options bag. At present, it allows you to opt-in to using shadow DOM for your custom element by setting the shadow property to true , and if so, you can also specify the encapsulation mode with mode , which can be either 'open' or 'closed' . Additionally, you may mark the shadow root as being serializable with the boolean serializable property. When using s","default_branch":null,"files":null,"tree":[],"storefront":"/r/preactjs","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/preactjs/preact-custom-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}