AwareComponent

A lightweight base class for building Web Components with optional Shadow DOM and simple reactivity.

What is AwareComponent?

AwareComponent is a class that extends HTMLElement to simplify building modern Web Components, allowing you to:

• Use or opt out of Shadow DOM as needed.
• Declare observed attributes and automatically update the DOM when they change.
• Keep your components minimal and easy to understand.

Installation

npm install aware-component

Usage Example

import { AwareComponent } from 'aware-component'

class UserCard extends AwareComponent {
  static observedItems = ['name', 'age']

  render() {
    this.$root.innerHTML = `
      <div>
        <h1 data-ref="name"></h1>
        <p data-ref="age"></p>
      </div>
    `
  }
}

customElements.define('user-card', UserCard)

Then in your HTML:

<user-card name="Jane" age="28"></user-card>

🔧 API and Features

• static useShadow: Enables Shadow DOM by default (true). You can disable it.
• static cssText: Allows injecting CSS directly as a string.
• static observedItems: List of attributes to observe.
• render(): Method to be overridden to define the component's DOM.
• updateReferences(attr?): Dynamically updates elements with data-ref matching the attribute name.

🤝 Authors

• Marco Del Boccio - Email
• Diego Torres - Email

Both contributed equally to the creation and design of this component.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.