ShadowJSShadowJSv1.0.0
[]previous and next page

Common mistakes

Common mistakes in the Styling guide.

For agentsUpdated
  • Mixing dynamic class with class: or classList. The class rewrite removes the toggled names. Put every conditional name in the one class object.
  • Calling an accessor wrong in a derived class. class={{ on: !flag }} with flag a signal is always the opposite of what you want; write flag().
  • A number where another unit is meant. width: 10 is 10px, as in React. Write a string for rem, % or vh, such as width: "50%".
  • Composing Tailwind class names. See Tailwind CSS 4.
  • Expecting style strings to merge. A string replaces all inline styles on that element. Use an object, or style:name, when several bindings share an element.
  • Reading styles from the DOM in an effect before it is attached. Refs run when the element is created, before it is inserted; read layout in onMount.