From 1440ff9cf5078b7a0cc034b95d596936b2e92d32 Mon Sep 17 00:00:00 2001 From: waldronmatt Date: Mon, 8 Apr 2024 20:18:39 -0400 Subject: [PATCH] docs(readme.md): update readme --- packages/lit-override/README.md | 10 ---------- 1 file changed, 10 deletions(-) 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.