Add `fragment` directive

[hawkticehurst]

Feature request

When implementing the todo-list example, I realized that there might be a good opportunity to better integrate/abstract using <template> and it's associated API into Stellar.

The goal would be to enable an easier way to dynamically add small predefined pieces of UI into the DOM of a Stellar component, such as a todo list item.

A casual example:

I don't have a strong sense of how the directive should work yet, but some loose thinking would go as follows:

<todo-list>
  <input type="text" @keydown="addTodo" placeholder="Add todo item">
  <section :ref="todos" class="todos"></section>
  <template :fragment="todo">
    <label>
      <input type="checkbox">
      <span $state="item"></span>
    </label>
  </template>
</todo-list>

<script type="module">
  import { Stellar } from 'stellar-element';
  class TodoList extends Stellar {
    addTodo = (event) => {
      if (event.key !== "Enter") return;
      this.item = event.target.value;
      this.refs.todos.appendChild(this.fragments.todo);
    }
  }
  customElements.define('todo-list', TodoList);
</script>

The core goals would be to handle:

• Saving templates to a class property this.fragments
• Automatically cloning the content of a template
• Evaluating template content so Stellar directives can be used

Other goals not shown:

• Declaratively appending fragments to the DOM (via something like an :append or fragment:append directive)