diff --git a/packages/lit-override/README.md b/packages/lit-override/README.md index 70b335b6..66a49fe5 100644 --- a/packages/lit-override/README.md +++ b/packages/lit-override/README.md @@ -76,14 +76,6 @@ export class ChildComponent extends LitElement { return html`${templateContentWithFallback({ fallback: html`

Default markup

`, id: this.templateId })}`; } } - -customElements.define('child-component', ChildComponent); - -declare global { - interface HTMLElementTagNameMap { - 'child-component': ChildComponent; - } -} ``` Set `templateId` on `child-component` to point to the template from which to add styles and markup overrides from: @@ -158,8 +150,6 @@ render() { **Note**: Go to the `lit-override` project via [`apps/lit-override`](../../apps/lit-override) to see more examples. -For a similar native web component implementation, check out [this article](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/#aa-the-best-of-both-worlds) and associated [codepen](https://codepen.io/calebdwilliams/pen/rROadR). - ## Background When building out a design library, I came across situations where I needed a parent component/app to override child component styles and markup. Use cases included rendering different combinations of `p` tags, `div` tags, images, and other basic elements. Implementing, however, wouldn't be easy for many reasons. Dealing with component `shadowroot`s makes overriding particularly difficult. There are also reliability issues with race conditions when applying overrides to childen components.