Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upBetter support <template> tags #19932
Comments
|
I'm pretty new to react, but this seems contrary to react's philosophy. Is the goal to allow react to create some DOM template that can be handed off off to something? This has some suggestions on how to do that with template, but like it says in the answer seems like the wrong use case. Instead of using template, could you instead make the component and after it's rendered, copy it with React.cloneElement() or do a copy on the actual DOM node? |


HTML
<template>tag is used to pass reusable templates to web components.However, at the moment this doesn't work with React in a way that is useful to users.
Context: Basic usage of
<template>If you have HTML like this:
You can then use this template with pure JS like this:
The important part here is the
contentproperty of the template.Whats the problem?
Writing the template code in HTML is OK. However, if you create the template DOM nodes with JS like this, it won't work:
In this case, the
contentproperty of the template will be empty. Instead, one would have to do either of these:or
The first does work because there is a special case in
innerHTMLfor template tags (see mdn).The second example works because the
<p>DOM node is added directly to thecontentof the template.What does this has to do with React?
When using React to create the template, React is appending the generated DOM nodes directly to the template node and not to the
contentproperty of the template node. For this reason at the moment you can't really use template tags in React apps.I have the impression that this is not the fault of React as the same problem exists for angular and most likely other spa frameworks too. Instead this looks like a misconception of the
templatetag to me (mayby I'm wrong on this and there is a good reason for this behavior).However, maybe React could do something to make this usecase less anoying? A possible solution could be to detect if the parent node is a
templateand to add the child nodes to thecontentproperty instead of the node itself. But I'm not sure if there would be any negative side-effects of this.