Re: [WICG/webcomponents] `customElements.upgrade` does not upgrade node subtrees cloned from `template` contents via `cloneNode` (Issue #946)

trusktr left a comment (WICG/webcomponents#946)

3 years later and I stumbled on this again. It is very confusing. As @Jamesernator mentioned:

> The confusing point isn't that elements don't get upgraded on `cloneNode`, the confusing point is that calling `customElements.upgrade` **explicitly** on such elements doesn't do anything because they aren't associated to the main document.

Upgrades are, for sure, the most frustrating aspect of Custom Elements. This `upgrade()` fuels that fire.

In case it helps anyone who stumbles here, I'll show an example that doesn't work, and how to make it work.

Not working ([codepen](https://codepen.io/trusktr/pen/pvggjyo/07a5cda8275fd7692efaec6d0a5a92b5)):

```js
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"
```

Working ([codepen](https://codepen.io/trusktr/pen/myVVemG/bf6477874326074de429e5d73834386a)):

```js
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 = document.importNode(template.content, true)

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

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

// document.body.append(frag) // not needed for upgrade
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/946#issuecomment-3336854164
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/946/3336854164@github.com>