# FAQ
In this section you can find answers to frequently asked questions regarding javascript and Web Components.
Menu:
Deep dives:
- Component Libraries
- 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 settype
style if type has a certain valuewidth
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