# FAQ

In this section you can find answers to frequently asked questions regarding javascript and Web Components.

Menu:

Deep dives:

• Managing events in your custom elements
• Rerender not triggered
• Unit testing custom events
• Unit testing initialization error

# Custom elements render life cycle

# How can I set :host width via a property?

The following example features 3 variations:

• disabled style differently if a property is set
• type style if type has a certain value
• width map a property to a css variable

class MyEl extends LitElement {
  static get properties() {
    disabled: { type: Boolean, reflect: true },
    width: { type: String },
    type: { type: String, reflect: true },
  }

  static get styles() {
    return css`
      :host {
        width: var(--my-el-width)px;
      }
      :host([disabled]) {
        background: grey;
      }
      :host([type=bar]) {
        background: green;
      }
    `;
  }

  constructor() {
    super();
    this.disabled = false;
    this.width = '200px';
    this.type = 'foo';
  }

  updated(changedProperties) {
    if (changedProperties.has('width')) {
      // this is only supported on evergreen browsers; for IE11 a little more work is needed
      this.style.setProperty('--my-el-width', this.width);
    }
  }
}

# Checkbox's 'checked' attribute does not match the property

Many elements reflect their properties as attributes, and vice versa, like for example the disabled attribute on a button.

<button disabled></button>

console.log(myButton.disabled); // true
console.log(myButton.hasAttribute('disabled')); // true

If we set the property to false, it'll reflect it to an attribute. (In this case, because it's a boolean attribute, it'll be omitted)

myButton.disabled = false;
console.log(myButton.hasAttribute('disabled')); // false

This concept is called attribute reflection.

However, this is not true for the checked attribute on an input element of type checkbox. The checked property on the input element does not reflect to an attribute, and should only be relied on to set an initial state. Consider the following example:

<input id="mycheck" type="checkbox" checked></input>

It will only set the property the first time:

console.log(mycheck.checked); // true

Removing the checked attribute does not change the checked property.

mycheck.removeAttribute('checked');
console.log(mycheck.checked); // true

And similarly, changing the checked property does not change the attribute:

mycheck.checked = false;
console.log(mycheck.hasAttribute('checked')); // true
console.log(mycheck.checked); // false

# Redux: process is not defined

If you're using Redux, you may run into the following error message:

ReferenceError: process is not defined
      at node_modules/redux/es/redux.js:657:1

The reason for this is that Redux ships CommonJS by default, and expects process.env.NODE_ENV to be set. In the browser, this is not the case. The solution for this is to use the ESM build of Redux instead. It's importable from node_modules/redux/es/redux.mjs. Note that the .js version still expects process.env.NODE_ENV, but the .mjs version does not. You'll want to use the .mjs version.

And everything should run in the browser as expected.