Change cloneNode references to importNode

[frehner]

Description

Updated examples to use document.importNode() exclusively, and references to refer to both importNode and Node.cloneNode.

Motivation

document.importNode and Node.cloneNode are largely similar, but have one important difference; the timing of when the node is adopted. When using Node.cloneNode(), the content isn't adopted until it's either explicitly adopted or when it's appended to the document, so at a later point after calling cloneNode(). This falls into an edge-case annoyance where calling upgrade on nodes that aren't yet adopted causes them to not actually get upgraded. This real example from the Web Components discord demonstrates the edge-case:

class MyEl extends HTMLElement {
  constructor() {super(); console.log('MyEl constructor')}
}
customElements.define('my-el', MyEl)

const template = document.createElement('template')
template.innerHTML = '<my-el></my-el>'

const frag = template.content.cloneNode(true)

console.log(customElements.get('my-el')) // MyEl

customElements.upgrade(frag) // crickets
console.log('My el constructor should have ran already')

document.body.append(frag) // logs "MyEl constructor"

If you change from content.cloneNode() to document.importNode() then the constructor will run and the content is upgraded correctly.

So we would like to update the examples to show document.importNode() being used by default, and also update references/links to show it as an option next to cloneNode.

Additional details

Web components discord discussion https://discord.com/channels/767813449048260658/767813449048260661/1421037073829199994

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/API/HTMLTemplateElement/content
• /en-US/docs/Web/API/Web_components/Using_templates_and_slots
• /en-US/docs/Web/HTML/Reference/Elements/template

Flaws (3)

Note! 2 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/Web_components/Using_templates_and_slots
Title: Using templates and slots
Flaw count: 3

• macros:
  • Macro produces link /en-US/docs/Web/Web_Components/Using_custom_elements which is a redirect
  • Macro produces link /en-US/docs/Web/Web_Components/Using_shadow_DOM which is a redirect
  • Macro produces link /en-US/docs/Web/Web_Components/Using_templates_and_slots which is a redirect