[spankalee]

Custom Elements don't specify how they render at all - they're only about creating instance of specific HTMLElement subclasses during browser operations like parsing, document.creatElement(), cloneNode(), etc., and firing "reactions" like connectedCallback() and attributeChangedCallback(). Once created, Custom Elements can really do anything to the document, there's not built-in concept of templating.

Generally though, Custom Elements are going to create a shadow root and render some DOM into it. It's all just code, so an element subclass can use a template library, and can do things like you want, like decouple its template from its implementation.

Here's a sketch of an element that would use a template as determined by a 'template' attribute.

    class MyElement extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({mode: 'open'});
      }

      render() {
        this.template.render(this.shadowRoot);
      }

      attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'template') {
          this.template = templateLib.lookup(newValue);
          this.render();
        }
      }
    }

And you'd use it like this:

    <my-element template="progress-bar"><my-element>