Integration: using HTMLTemplateElement inside CustomElements

[riovir]

What problem does this feature solve?

Conveniently using Custom Elements that require both prop bindings and HTMLTemplateElements together with Vue templates.

Related fixed bug: #8041

The fix unfortunately doesn't allow the parent of the HTMLTemplateElement to retain its prop bindings with Vue.

The use case is similar to the scoped slot feature of Vue, but with Custom Elements. It's clear that without a special directive Vue will not assume the <template> is expected to be a HTMLTemplateElement.

Assumptions:

• Using v-pre on the parent breaks prop bindings
• Using v-pre on the child template still makes Vue skip rendering the <template> element
• This behavior of v-pre is intended

JsFiddle:

Attempts at the problem and desired solution. https://jsfiddle.net/qhkb6sof/2/

What does the proposed API look like?

The v-native directive, marking a tag to be rendered as the native DOM element of the same name.

Since there is a proposal on the way to allow mustache-style expressions inside HTMLTemplateElements v-pre might still be needed to avoid Vue interpreting the internals.

Only using the already present v-pre would be nice, but I'm unsure how much of the already established behavior it would break.

<x-filtered-list :items.prop="['one', 'two', 'three']" search="t">
  <!-- The template is intended to represent the "native" HTMLTemplateElement, which needs to be rendered -->
  <template v-native v-pre>
    <!-- The expression below expected to be ignored by Vue and rendered as is  -->
    <li>{{text}}</li>
  </template>
</x-filtered-list>

The resulting DOM should look like this in inspection:

<x-filtered-list search="t">
  <template>
    #document-fragment
      <li>{{text}}</li>
  </template>
</x-filtered-list>

Ideally <li>{{text}}</li> ends up in the #document-fragment.