Skip to content

Commit

Permalink
fix(docs): Minor updates to styling documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
himerus committed Mar 8, 2024
1 parent 5f8bd81 commit fc5fece
Showing 1 changed file with 7 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ import '@phase2/outline-core-alert';
# Styling Components

<outline-core-alert status="error">
<span slot="header">Documentation Status: (11/07/2023)</span>
<p>This documentation is In need of rewrite.</p>
<span slot="header">Documentation Status: (03/08/2024)</span>
<p>This documentation is In need of a complete rewrite.</p>
</outline-core-alert>
<br/>

Expand Down Expand Up @@ -50,17 +50,18 @@ export class OutlineWidget extends LitElement {

## Inheriting Styles

Interestingly, the above sample is a component, `OutlineWidget`, that extends `OutlineElement`.
Interestingly, the above sample is a component, `OutlineWidget`, that extends `LitElement`.
This component is simply declaring the styles in `OutlineWidget`, and assumes zero style inheritance from the parent component.
Now, assume that `OutlineElement` provides styles that either should or could be inherited by any component that extends it. If we want to include styles from the parent component, we need to [inherit styles from the superclass](https://lit.dev/docs/components/styles/#inheriting-styles-from-a-superclass).
Now, assume that `OutlineElement` provides styles that either should or could be inherited by any component that extends it.
If we want to include styles from the parent component, we need to [inherit styles from the superclass](https://lit.dev/docs/components/styles/#inheriting-styles-from-a-superclass).

```typescript
import componentStyles from './outline-widget.css.lit';
...

@customElement('outline-widget')
export class OutlineWidget extends LitElement {
static styles: CSSResultGroup = [ OutlineElement.styles, componentStyles ];
static styles: CSSResultGroup = [ super.styles, componentStyles ];
...
}
```
Expand All @@ -71,7 +72,7 @@ The following example shows both importing content from the default `outline-wid

```typescript
import { css } from 'lit';
import componentStyles from './outline-widget.css.lit';
import componentStyles from './outline-widget.css?inline';

@customElement('outline-widget')
export class OutlineWidget extends LitElement {
Expand Down

0 comments on commit fc5fece

Please sign in to comment.