[youdounderstand]

Do custom elements allow re-templating?

It's pretty powerful to be able to separate the visual presentation of a control (i.e., markup) from the logic. Every determinate progress bar has 0..1 progress and current progress properties, but the visual representation needs to be able to vary widely in order for these elements to be truly reusable. And it would be nice to be able to change the template (including adding/removing DOM elements to it) without having to define a subclass in JS.

[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>

[some1else]

Use composition. Extract the logic out of your custom element into another class (ie.: Progress). That can parent any compatible presentational custom element (i.e.: ProgressText, ProgressBar)