39 lines
777 B
JavaScript
39 lines
777 B
JavaScript
// @ts-check
|
|
import { WebComponent, html } from "../../src/index.js";
|
|
|
|
class StyledElements extends WebComponent {
|
|
static props = {
|
|
condition: false,
|
|
type: "info",
|
|
};
|
|
|
|
#typeStyles = {
|
|
info: {
|
|
backgroundColor: "blue",
|
|
border: "1px solid green",
|
|
},
|
|
warn: {
|
|
backgroundColor: "yellow",
|
|
border: "1px solid orange",
|
|
},
|
|
error: {
|
|
backgroundColor: "orange",
|
|
border: "1px solid red",
|
|
},
|
|
};
|
|
|
|
get template() {
|
|
return html`
|
|
<div
|
|
style=${{
|
|
...this.#typeStyles[this.props.type],
|
|
padding: "1em",
|
|
}}
|
|
>
|
|
<p style=${{ fontStyle: this.props.condition && "italic" }}>Wow!</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("styled-elements", StyledElements);
|