<template> tags with variable interpolation for Declarative Shadow DOM

[thescientist13]

Coming out #63, was curious how to support instance members when using a template tag? For example, the current convention for using <template> is to do something like this.

const template = document.createElement('template');

template.innerHTML = `    
  <footer class="footer">
    <h4>My Blog &copy; ${new Date().getFullYear()}</h4>
  </footer>
`;

But what if you want to do something like this?

class Greeting extends HTMLElement {
  constructor(countryCode, countryName) {
    super();
    this.countryCode = countryCode;
    this.countryName = countryName;
    this.COUNTRY_FLAG_MAPPER = {
      US: '🇺🇸',
      CA: '🇨🇦',
      MX: '🇲🇽',
      JP: '🇬🇧',
      UK: '🇬🇧',
      ES: '🇪🇸',
      BR: '🇧🇷',
      NG: '🇳🇬',
      EG: '🇬🇧',
      IN: '🇮🇳',
      UA: '🇺🇦'
    };
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      const flag = this.COUNTRY_FLAG_MAPPER[this.countryCode] || '🌐';

      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <div>
          <h1>Coming From Country: 
            <span>${this.countryName} ${flag}<span>
          </h1>
          <slot name="details"></slot>
        </div>
      `;
    }
  }
}

export default Greeting;

customElements.define('wc-greeting', Greeting);

Not sure if there is a way to imperatively interact with template?

[thescientist13]

One option is make a function for it, e.g.

function getTemplate(countryName, flag) {
  const template = document.createElement('template');

  template.innerHTML = `    
     <div>
       <h1>
         Coming From Country: <span>${countryName} ${flag}<span>
       </h1>
       <slot name="details"></slot>
     </div>
  `;
  }

  return template;
}

Or maybe use DOM somehow? Maybe attributes? 🤔

class Greeting extends HTMLElement {
  constructor(countryCode, countryName) {
     ...
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      const flag = this.COUNTRY_FLAG_MAPPER[this.countryCode] || '🌐';
      
      template.getElementById('span.countryName').textContent(this.countryName);
      template.getElementById('span.flag').textContent(flag);
      
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

[thescientist13]

Was re-acquainted with the Template Instantiation / Parts proposal and realized it is exactly what this is Discussion is looking for. It seems like it would be easy enough to support?

Example

// Template content is `<section><h1>{{name}}</h1>Email: <a href="mailto:{{email}}">{{email}}</a></section>`

shadowRoot.appendChild(template.createInstance({name: "Ryosuke Niwa", email: "[email protected]"}));

Discussion on going here - whatwg/html#2254

Looks like GitHub has a polyfill for it? 👀
https://github.com/github/template-parts

---

I wonder through this if there is a case to enable experimental settings in the compiler for things like this? I'm not sure how far along it is, I don't think very, so could be bleeding edge at this point? 🤔

[thescientist13]

Could be good to report back here once i've had some time to digest and maybe implement something; WICG/webcomponents#704 and WICG/webcomponents#747