Use Light DOM as much as possible. It simplifies event handling, allows sharing global styles, and ensures better form handling, accessibility, and SEO. Use Shadow DOM only when necessary, for example, when including external content that needs strict style isolation or preventing style/script conflicts.

UIElement is designed to work with server-rendered HTML. Use any backend technology to produce the HTML, and rely on UIElement's client-side reactivity to update the DOM. To dynamically add elements, use techniques like cloning <template> tags and inserting them into the DOM.

Always use connectedCallback() for initializing the component, as this is when it is connected to the DOM. Only use the constructor for simple initializations, since it runs before the element is attached to the DOM, so DOM and attributes are not yet available.

Use signals to manage state changes. Signals automatically synchronize with the DOM through auto-effects, making your component reactive. Direct DOM manipulation bypasses this system and can lead to inconsistencies between state and the UI.

Use states to parse attributes into appropriate types, such as numbers, booleans, or strings. This helps ensure that changes to the DOM and internal state are consistent. Remember that changes to signals are reactive, but attributes need to be mapped properly for reactivity.

Bind all event listeners within connectedCallback() using methods like .on(event, callback). This ensures that the event listeners are bound after the component is attached to the DOM, providing reliable event handling.

Use auto-effects like setText() or toggleClass() for simple DOM updates based on signals. Use custom effects with effect() for more complex or multi-step operations. Avoid nesting auto-effects in custom effects to prevent double encapsulation.

Use effect(async () => { ... }) to handle async operations safely. Make sure that state changes within the effect do not cause infinite loops by adding appropriate conditions and guards.

Initialize derived signals in connectedCallback() and use conditions to update their values based on changes to other signals. This ensures they are properly tracked in the reactivity system.

Use console logs to track state changes and transitions. Break down complex effects into smaller auto-effects or simpler custom effects to improve readability and easier debugging.

Use context providers and consumers to share state across components. Ensure that super.connectedCallback() and super.disconnectedCallback() are called in both context providers and consumers to correctly manage context requests and updates.

Use the pass() function to transfer signals from parent to child components. This approach maintains loose coupling between components while enabling efficient state sharing and updates.

Scope styles within the custom element using CSS nesting or Shadow DOM where necessary. Avoid styling sub-component elements directly from parent components to ensure proper encapsulation and prevent global style leakage.

Use ARIA attributes like aria-invalid and aria-errormessage to make forms accessible. Provide feedback through appropriate descriptions and error messages, making sure screen readers can announce the state of form elements and their validity.