Fehler immer Inhalt aus Vorlage customelement

Question

ich eine grundlegende CustomElement haben, aber ich bin folgendes Problem mit:

<template id="custom-element"> 
    <h1>Example 1</h1> 
</template> 

<script> 

    class CustomElement extends HTMLElement { 

    constructor() { 
     super(); // always call super() first in the ctor. 
     let shadowRoot = this.attachShadow({mode: 'open'}); 
     const template = document.querySelector('#custom-element'); 
     const instance = template.content.cloneNode(true); 
     shadowRoot.appendChild(instance); 
    } 
    connectedCallback() { 
     console.log("Connected"); 
    } 

    disconnectedCallback() { 

    } 

    attributeChangedCallback(attrName, oldVal, newVal) { 

    } 
    } 

    window.customElements.define('custom-element', CustomElement); 

</script> 

Ich erhalte diesen Fehler in der Konsole:

Uncaught TypeError: Cannot read property 'content' of null

Und es liegt daran, die const template ist immer null. Das hat vorher funktioniert, aber ich weiß nicht, ob sich etwas geändert hat, jetzt funktioniert es nicht. Ich verwende Chrome Version 62.0.3202.94 (Official Build) (64-Bit) Helfen Sie bitte?