The Wayback Machine - https://web.archive.org/web/20201023151201/https://github.com/facebook/react/issues/19932
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better support <template> tags #19932

Open
manuel-mauky opened this issue Sep 30, 2020 · 1 comment
Open

Better support <template> tags #19932

manuel-mauky opened this issue Sep 30, 2020 · 1 comment

Comments

@manuel-mauky
Copy link

@manuel-mauky manuel-mauky commented Sep 30, 2020

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:

<template>
	<p>Some Text</p>
</template>

You can then use this template with pure JS like this:

const template = document.querySelector("template")

const node = template.content.cloneNode(true)

document.append(node)

The important part here is the content property 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:

const template = document.createElement("template")
const p = document.createElement("p")
p.textContent = "Some Text"
template.appendChild(p)

In this case, the content property of the template will be empty. Instead, one would have to do either of these:

const template = document.createElement("template")
template.innerHTML = "<p>Some Text</p>"

or

const template = document.createElement("template")
const p = document.createElement("p")
p.textContent = "Some Text"
template.content.appendChild(p) // notice `content`

The first does work because there is a special case in innerHTML for template tags (see mdn).
The second example works because the <p> DOM node is added directly to the content of 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 content property 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 template tag 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 template and to add the child nodes to the content property instead of the node itself. But I'm not sure if there would be any negative side-effects of this.

@strattonbrazil
Copy link

@strattonbrazil strattonbrazil commented Oct 17, 2020

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.
https://stackoverflow.com/questions/42845195/how-can-i-render-a-template-tag-with-react

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.