I am curious about the relationship between front-end component design and polylith. I know the polylith team is working on bringing polylith tool to the front-end, but would like to hear more experienced developers if they granularize their front-end react or other components according to pl guidelines and if they have found this useful or not.

Something like this for example:

// Component for user image
class UserImage extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        img { width: 100px; height: auto; }
      </style>
      <img src="${this.getAttribute('src')}" alt="User Image">
    `;
  }
}

// Component for user name
class UserName extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.textContent = this.getAttribute('name');
  }
}

// Component for user bio
class UserBio extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.textContent = this.getAttribute('bio');
  }
}

// Registering components
window.customElements.define('user-image', UserImage);
window.customElements.define('user-name', UserName);
window.customElements.define('user-bio', UserBio);

Obviously these are useless components just to serve as an example.