このカスタム要素は機能しますか？私はそれをやめましたMaterial Design lite

Question

class CardElement extends HTMLElement { 
    constructor() { 
     super(); 

     let shadow = this.attachShadow({mode: open}); 

     let div = document.createElement('div'); 

     let div_main = div; 
     div_main.className = "demo-card-square mdl-card mdl-shadow--2dp"; 
     shadow.appendChild(div_main); 
     let div_sec = div; 
     div_sec.className = "mdl-card__title mdl-card--expand"; 
     div_sec.style.background = this.getAttribute('src'); 
     shadow.appendChild(div_sec); 
     let h2 = document.createElement('h2'); 
     h2.className = "mdl-card__title-text"; 
     h2.innerHTML = this.getAttribute('text'); 
     shadow.appendChild(h2); 
     let div_three = div; 
     div_three.className = "mdl-card__supporting-text"; 
     div_three.innerHTML = this.getAttribute('support-text'); 
     shadow.appendChild(div_three); 
     let div_border = div; 
     div_border.className ="mdl-card__actions mdl-card--border"; 
     shadow.appendChild(div_border); 
     let anchor = document.createElement('a'); 
     anchor.className = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"; 
     shadow.appendChild(anchor); 
    } 
} 
customElements.define('card-element', CardElement); 
} 

カードコンポーネント（https://getmdl.io/components/index.html#cards-section）を上記のコードのようなカスタム要素にしようとしました。しかし、適切な出力を見ることができませんでした。私はちょうどウェブのためのアプリケーションを開発し始めたので、どんな助けも高く評価されています。

<card-element src="img.jpg" text="Inside" support-text="Can you see what I've done here!"></card-element> 

そして、これは私にエラー表示されます。 Uncaught TypeError: Failed to execute 'attachShadow' on 'Element': The provided value 'function open() { [native code] }' is not a valid enum value of type ShadowRootMode. at new CardElement

をだから、仕事やどのように私はこの問題に取り組むべきであるされていないなぜあなたは私を聞かせてことができます。

Answer 1

あなたはattachShadow()にopenで単純または二重引用符を使用する必要があります。

let shadow = this.attachShadow({mode: "open"});