Tailwind CSS with LitElement for Efficient Web Development

28 Jan, 2025
By Rainforest Cheng

CSS in JS

import style from './theme.css?inline';

@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
  static override styles = [unsafeCSS(style.replaceAll(':root', ':host'))];
}

Define properties with defaults

@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
  static {
    if (!isServer) {
      const styleSheets = Object.entries(
        getSchemeProperties(defaultTheme.schemes.light)
      ).map(
        ([key, color]) =>
          unsafeCSS(`
      @property ${key} {
        syntax: "<color>";
        inherits: true;
        initial-value: ${hexFromArgb(color)};
      }
    `).styleSheet as CSSStyleSheet
      );
      document.adoptedStyleSheets.push(...styleSheets);
    }
  }
}

Streamline Your User Experience: Leveraging enterKeyHint for Better Accessibility

16 Jan, 2025
By Rainforest Cheng

Address Input

When aiming to deliver an exceptional user experience, consider utilizing the enterKeyHint attribute. This feature provides guidance on what action should be taken when the Enter key is pressed, thereby enhancing accessibility for users who rely on screen readers and other assistive technologies. On iOS devices, the ‘Done’ button on keyboards often leads users to close the keyboard inadvertently, which can result in missed form submissions due to a lack of understanding about the grey-colored return key’s purpose. By incorporating enterKeyHint, you can mitigate this issue and create a more intuitive experience for your users.

Multi-line Address Input

Taiwan