javascript - 这个自定义元素会起作用吗？我已经把它从 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:无法在“Element”上执行“attachShadow”:提供的值“function open() { [native code] }”不是 ShadowRootMode 类型的有效枚举值。
在新的 CardElement

那么你能告诉我为什么它不起作用或者我应该如何解决这个问题。

Answer 1

你应该在 attachShadow() 中对 open 使用单引号或双引号:

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