Skip to content

Commit

Permalink
docs(readme.md): update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
waldronmatt committed Apr 9, 2024
1 parent 5f4a816 commit 1440ff9
Showing 1 changed file with 0 additions and 10 deletions.
10 changes: 0 additions & 10 deletions packages/lit-override/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,6 @@ export class ChildComponent extends LitElement {
return html`${templateContentWithFallback({ fallback: html`<p>Default markup</p>`, 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:
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 1440ff9

Please sign in to comment.