Styling with Ignite-Element

Ignite-Element provides flexible styling options for your web components. Whether you use global styles, scoped styles, or utility-based frameworks like Tailwind CSS, you can easily manage and customize the appearance of your components.

---

Styling Options

• Global Styles: Apply styles globally across all components using setGlobalStyles. This is useful for shared design systems or CSS frameworks like Tailwind CSS or Bootstrap.

• Scoped Styles: Use inline <style> tags within components to encapsulate styles. This ensures styles are limited to specific components and do not affect others.

• Dynamic Styles: Dynamically apply styles based on component state or properties.

---

Using Global Styles

Global styles allow you to define CSS rules that apply to all components. This is particularly useful for design systems or when using a CSS framework.

Example: Setting Global Styles

You can include styles from frameworks like Tailwind, Bootstrap, or custom stylesheets by referencing their paths in setGlobalStyles:

JavaScript

import { setGlobalStyles } from "ignite-element";

// Using a CSS framework like Tailwind or Bootstrap
setGlobalStyles("./styles/tailwind.css");

// Using a custom CSS stylesheet
setGlobalStyles("./styles/custom-theme.css");

This approach ensures the styles are globally accessible while keeping the setup simple and maintainable.

---

Using Scoped Styles

Scoped styles are defined directly inside components using <style> tags. These styles are encapsulated, ensuring they do not leak into other parts of the application.

Example: Scoped Styles in a Component

JavaScript

igniteElement.shared("scoped-styled-button", () => {
  return html`
    <style>
      .button {
        padding: 10px 20px;
        background-color: #0077cc;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .button:hover {
        background-color: #005fa3;
      }
    </style>
    <button class="button">Click Me</button>
  `;
});

---

Using Dynamic Styles

Dynamic styles allow you to update the appearance of a component based on its state or properties. This approach is particularly useful for creating interactive or stateful UI components.

Example: Dynamic Styles

JavaScript

igniteElement.shared("dynamic-button", (state, send) => {
  const color = state.value === "active" ? "#28a745" : "#0077cc";

  return html`
    <button
      style="padding: 10px 20px; background-color: ${color}; color: white; border: none; border-radius: 4px; cursor: pointer;"
      @click=${() => send({ type: "TOGGLE" })}
    >
      ${state.value === "active" ? "Active" : "Inactive"}
    </button>
  `;
});

---

Best Practices

• Use Global Styles for Shared Rules: Apply global styles for consistent branding and design systems across all components.

• Encapsulate Styles When Necessary: Use scoped styles to prevent style leakage and conflicts between components.

• Leverage Dynamic Styles for Interactivity: Dynamically adjust styles based on the component’s state or context for interactive elements.

• Keep Paths Simple: Use setGlobalStyles to include paths to stylesheets instead of directly embedding large CSS rules, ensuring clean and maintainable code.

With Ignite-Element, you can manage styles flexibly and efficiently, from global design systems to highly dynamic, scoped styles. This ensures your components remain modular and adaptable to various projects.