Hello, {name}!
\n);\n\nregister(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open', adoptedStyleSheets: [], serializable: true });\n// ^ ^ ^ ^ ^ ^ ^\n// | HTML tag name | use shadow-dom | use adoptedStyleSheets |\n// Component definition Observed attributes Encapsulation mode for the shadow DOM tree Root is serializable\n```\n\n> _**\\* 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._\n\nUse the new tag name in HTML, attribute keys and values will be passed in as props:\n\n```html\nHello, Billy Jo!
\n```\n\n### Observed Attributes\n\nThe 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:\n\n```js\n// Listen to changes to the `name` attribute\nregister(Greeting, 'x-greeting', ['name']);\n```\n\nIf 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:\n\n```js\nimport register from 'preact-custom-element';\n\n//Hello, {name}!
;\n }\n}\nregister(Greeting);\n```\n\nIf no `observedAttributes` are specified, they will be inferred from the keys of `propTypes` if present on the Component:\n\n```js\n// Other option: use PropTypes:\nfunction FullName({ first, last }) {\n return {first} {last}\n}\n\nFullName.propTypes = {\n first: Object, // you can use PropTypes, or this\n last: Object // trick to define untyped props.\n};\n\nregister(FullName, 'full-name');\n```\n\n### Passing slots as props\n\nThe `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.\n\nWhen using shadow DOM, you can make use of named `{content}
\n