LitElement: Setting styles from attributes

Question

I'm building a custom web component with LitElement and would like to give it a disabled attribute. I've got the styling working but I'm afraid I'm using an anti pattern to accomplish it. I have defined a class method and am calling it in the render() method to set the style I want. Is this correct or is there a better pattern? Thanks.

Javascript:

class Button extends LitElement {
    static get properties() {
        return {
            disabled: {type: Boolean},
            isFocused: {type: Boolean},
            isHovered: {type: Boolean},
            isMouseDown: {type: Boolean}
        }
    }

    constructor() {
        super();

        this.disabled = false;
        this.innerButtonText = this.innerHTML;
        this.styles = {};
        this.isFocused = false;
        this.isHovered = false;
        this.isMouseDown = false;
    }

    render() {
        this.setStyles();
        return html`
        <style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
        <style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
        <button 
        @focus="${this.onFocus}" 
        @blur="${this.onFocus}" 
        @mouseover="${this.onHover}"
        @mouseout="${this.onHover}"
        @mousedown="${this.onMouseDown}"
        @mouseup="${this.onMouseUp}"
        style=${styleMap(this.styles)}>${this.innerButtonText}</button>
      `
    }

    onHover() {
        this.isHovered = !this.isHovered;
    }

    onMouseDown(event) {
        event.stopPropagation();
        this.isMouseDown = !this.isMouseDown;
    }

    onMouseUp() {
        this.isMouseDown = !this.isMouseDown;
    }

    onFocus() {
           this.isFocused = !this.isFocused
    }

    onClick() {

    }

    setStyles() {
        if (this.disabled)
            this.styles = {
                backgroundColor: 'rgba(51,51,51,0.22)', color: 'rgba(51,51,51,0.66)', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        else if (this.isFocused)
            this.styles = {
                backgroundColor: '#2e7d32', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0 0 0 2px white, 0 0 0 4px #84BD00', outline: 'none', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        else if (this.isHovered)
            this.styles = {
                backgroundColor: '#005005', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px',
                position: 'relative', top: '+3px', cursor: 'pointer'
            };
        else if (this.isMouseDown)
            this.styles = {
                backgroundColor: '#005005', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px',
                position: 'relative', top: '-3px', cursor: 'pointer'
            };
        else {
            this.styles = {
                backgroundColor: '#2e7d32', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        }
    }
}

customElements.define('custom-button', Button);

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
<script type="module" src="./components/button/button.js"></script>
<body>
<custom-button>Button</custom-button>
<button style="margin: 5px">Button</button>
</body>
</html>

Answer 1

First, add the reflect option to the disabled property so that the property "reflects" the value of the attribute:

static get properties() {
  return {
    disabled: {
      type: Boolean,
      reflect: true,
    },
  };
}

Next, create astyles static getter to define styles for your <button> in its default and disabled states:

import { LitElement, css, html } from 'lit-element';

// ...

static get styles() {
  return css`
    button {
      background-color: #2e7d32;
      color: white;
      /* ... */
    }

    button[disabled] {
      background-color: rgba(51,51,51,0.22);
      color: rgba(51,51,51,0.66);
    }
  `;
}

Finally, set the <button> 's disabled attribute in your render method:

render() {
  return html`
    <button ?disabled=${this.disabled}><slot></slot></button>
  `;
}

(You'll note that I also got rid of the innerButtonText property in favor of the more idiomatic <slot> element .)

You can see this all working together in the below snippet:

 // import { LitElement, css, html } from 'lit-element'; const { LitElement, css, html } = litElement; class CustomButton extends LitElement { static get properties() { return { disabled: { type: Boolean, reflect: true, } }; } constructor() { super(); this.disabled = false; } static get styles() { return css` button { background-color: #2e7d32; color: white; font-family: Montserrat; font-weight: 700; height: 45px; padding: 15px 30px 15px 30px; border-radius: 5px; border: none; box-shadow: 0px 1px 3px #33333338; line-height: 1.3; letter-spacing: 1.3px; } button[disabled] { background-color: rgba(51,51,51,0.22); color: rgba(51,51,51,0.66); } `; } render() { return html` <button?disabled=${this.disabled}><slot></slot></button> `; } } customElements.define('custom-button', CustomButton);

 <script src="https://bundle.run/lit-element@2.2.1"></script> <custom-button>Button</custom-button> <custom-button disabled>Disabled button</custom-button>

LitElement: Setting styles from attributes

Question

1 answers

solution1
3 2019-11-18 21:33:21

LitElement: Setting styles from attributes

Question

1 answers

solution1 3 2019-11-18 21:33:21

solution1
3 2019-11-18 21:33:21