ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: mention styling is on beta

Browse source
This commit is contained in:
Ayo 2023-12-19 17:20:15 +01:00
parent 64fd600435
commit 4222257633
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -195,16 +195,17 @@ The current alternatives are using what `HTMLElement` provides out-of-the-box, w
1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). 1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows. 1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows.
## Styling ## Styling (beta)
When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) Upcoming on **v2.1.0**: When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration).
Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
```js ```js
import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js";
class StyledElements extends WebComponent { class StyledElements extends WebComponent {
static props = { static props = {
condition: false, emphasize: false,
type: "warn", type: "warn",
}; };
@ -227,7 +228,7 @@ class StyledElements extends WebComponent {
padding: "1em", padding: "1em",
}} }}
> >
<p style=${{ fontStyle: this.props.condition && "italic" }}>Wow!</p> <p style=${{ fontStyle: this.props.emphasize && "italic" }}>Wow!</p>
</div> </div>
`; `;
} }