Custom elements only works the first time?

[YerkoPalma]

🐛 bug report

Description of the problem

I'm using litElement to play with custom elements (but I guess the same happen to native custom elements) and the first time I run my app it works well, but after any change it complains

It seems like it tries to register a new component every time.

How has this issue affected you? What are you trying to accomplish?

Just a side project, but quite annoying bug actually.

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	latest?
Browser	Chrome Versión 70.0.3538.110 (Build oficial) (64 bits)
Operating System	Windows 10

[YerkoPalma]

To reproduce:

• Go to the linked sandbox and wait it to load
• Make any minor change (like changing this.mood = 'happy' to this.mood = 'Happy')
• Watch the error

[CompuIves]

Hmm, it seems like the sandbox relies on global state. This can be fixed in two ways:

1. Create a sandbox.config.json and enable in that config: 'Hard reload' (this refreshes the page on every change).
2. Create a sandbox.config.json and mark the template as static. This disables the bundler.

[CompuIves]

Here's an example sandbox: https://codesandbox.io/s/pj42p1v6wm

[orlov-vo]

You should define custom element only once. You can't to redefine it. It is prohibited in the spec. I guess you can get a new version of your component via module.hot.accept and call render again?

It is similar with: skatejs/skatejs#564

[YerkoPalma]

@orlov-vo I'm not redefining custom elements, it is just that I run the same code more than once (because I'm developing). @Compulves I'll try the static option later, thanks for the response

[YerkoPalma]

@CompuIves this is solved, thanks for your response

[qwabra]

in pure customElements

"hardReloadOnChange": true, didn't help me
but set template as static is works

Hmm, it seems like the sandbox relies on global state. This can be fixed in two ways:

1. Create a sandbox.config.json and enable in that config: 'Hard reload' (this refreshes the page on every change).
2. Create a sandbox.config.json and mark the template as static. This disables the bundler.