[Edit：这个问题似乎只在.hbs呈现中，因为当在EmberJS项目的顶级index.html中插入扩展的Web组件时，此代码确实起作用。
Edit 2：
但是，当我将它放在一个最小的.hbs示例中时，它确实起作用了。因此，很明显，这是与EmberJS渲染以及也许与Handlebars的交互。Edit 3：
当我使用Glimmer作为独立的渲染库并通过Glimmer组件的constructor()功能构建这些Web组件时，该问题也仍然存在（我知道是hacky，但它可以工作用于独立的自定义Web组件）。我试图了解如何在EmberJS中使用Web组件。我知道我可以将Web组件重写为EmberJS组件，但这不是重点。我想知道如何将Web组件直接集成到EmberJS中。
有一个教程，描述了如何制作自定义Web组件，以及如何通过创建初始化程序将其放入EmberJS。
https://tenbit.co/blog/a-simple-way-to-integrate-web-components-with-your-ember-app/
所以您会认为，对扩展的本机HTML组件执行相同的操作真是小菜一碟，对吧？事实并非如此。
这里是不起作用的最小示例。在此特定示例中，显示<p>hello world</p>，但不显示。但是，在具有相同类和<p>hello Mars</p>调用的独立HTML文件（请参见本文底部）中，它确实可以工作。
我还制作了一个EmberJS Twiddle，在其中可以看到它：define()
https://ember-twiddle.com/5b85957f52aba288bfe9e94ce42b811e这里是把手文件：
// app/initializers/custom-elements.js class HelloWorld extends HTMLElement { constructor() { super(); console.log("constructor() HelloWorld"); let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = `<p>hello world</p>`; } } //similar to HelloWorld -- it's simply an extension class TestingAParagraph extends HTMLParagraphElement { constructor() { super(); console.log("constructor() TestingAParagraph"); let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = `<p>hello Mars</p>`; } } export function initialize(application) { window.customElements.define("hello-world", HelloWorld); window.customElements.define("testing-a-paragraph", TestingAParagraph, { extends: "p" }); } export default { initialize };注意：此最小示例确实作为独立的HTML文件工作。
{{!-- my-template.hbs --}}
<p>Bladiebla</p>
<hello-world></hello-world>
<p>A test is coming</p>
<p is="testing-a-paragraph"></p>
编辑：此问题似乎仅在.hbs呈现中，因为当将扩展的Web组件插入EmberJS项目的顶级index.html中时，此代码确实起作用。编辑2：但是，当我...
我想我明白了。我认为Glimmer正在执行<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// app/initializers/custom-elements.js
class HelloWorld extends HTMLElement {
constructor() {
super();
console.log("constructor() HelloWorld");
let shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `<p>hello world</p>`;
}
}
//similar to HelloWorld -- it's simply an extension
class TestingAParagraph extends HTMLParagraphElement {
constructor() {
super();
console.log("constructor() TestingAParagraph");
let shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `<p>hello Mars</p>`;
}
}
window.customElements.define("hello-world", HelloWorld);
window.customElements.define("testing-a-paragraph", TestingAParagraph, {
extends: "p"
});
</script>
</head>
<body>
<p>Bladiebla</p>
<hello-world></hello-world>
<p>A test is coming</p>
<p is="testing-a-paragraph"></p>
</body>
</html>而不添加createElement属性选项。对此有一个vanillaJS问题。