SDA101 - User Interface Design and Implementation

Template Literals, String Manipulation

Web Components can benefit from the use of template literals and string manipulation techniques to create more dynamic and expressive markup.

Template Literals

Template literals, introduced in ES6, allow you to embed expressions within string literals using the backtick (`) character. This can be particularly useful when generating HTML content for your Web Components:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        h1 { color: ${this.getAttribute('color') || 'black'}; }
      </style>
      <h1>${this.getAttribute('title') || 'Default Title'}</h1>
      <p>${this.getAttribute('description') || 'Default description'}</p>
    `;
  }
}

customElements.define('my-element', MyElement);

In this example, the template literal is used to dynamically set the heading color and content based on the component's attributes.

String Manipulation

Beyond template literals, you can use various string manipulation techniques to generate and manipulate the HTML content of your Web Components:

class MyList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.items = this.getAttribute('items').split(',').map(item => item.trim());
    this.shadowRoot.innerHTML = this.generateList();
  }

  generateList() {
    return `
      <style>
        ul { list-style-type: none; padding: 0; }
        li { padding: 5px; }
      </style>
      <ul>
        ${this.items.map(item => `<li>${item}</li>`).join('')}
      </ul>
    `;
  }
}

customElements.define('my-list', MyList);

In this example, the generateList() method uses array methods like map() and join() to dynamically generate the list items based on the items attribute.

These string manipulation techniques, combined with template literals, provide a powerful way to create dynamic and customizable HTML content within your Web Components.