Angular6 在Angular 6中扩展本机HTML元素

我最近创建了一个本机web组件，它在所有浏览器中都运行良好。我将这个web组件移动到Angular 6应用程序中，所有工作都如期进行。然后，我尝试扩展一个本机HTML元素，除了将它引入Angular 6应用程序之外，它仍然工作得很好

使用Mozilla的例子，我将尝试说明我的问题。尝试使用以下命令扩展本机“p”元素：

//为元素创建一个类
类WordCount扩展了HTMLParagraphElement{
构造函数（）{
//始终在构造函数中首先调用超级
超级（）；
//计算元素父元素中的单词数
var wcParent=this.parentNode；
函数countWords（节点）{
var text=node.innerText | | node.textContent
返回text.split（/\s+/g）.length；
}
变量计数='Words:'+countWords（wcParent）；
//创建阴影根
var shadow=this.attachShadow（{mode:'open'}）；
//创建文本节点并向其添加字数
var text=document.createElement（'span'）；
text.textContent=计数；
//将其附加到阴影根
shadow.appendChild（文本）；
//元素内容更改时更新计数
setInterval（函数（）{
变量计数='Words:'+countWords（wcParent）；
text.textContent=计数；
}, 200)
}
}
//定义新元素
define（'word-count'，WordCount，{extends:'p'}）
这是一些文本
我假设原因是Angular在解析组件模板时创建这些自定义内置元素的方式-它可能不知道如何正确地做到这一点。很可能它认为
是一个常规属性，可以在创建元素后添加（它不是）

首先创建元素，然后添加
is
-属性，不幸的是不会升级元素

请参见下面的示例：
div#d
有一个自定义
输入的非工作示例


customElements.define（'my-input'，类扩展了HTMLInputElement{
connectedCallback（）{
this.value=this.parentNode.id
this.parentNode.classList.add（'connected'））
}
}, {
扩展：“输入”
})
document.addEventListener（'DOMContentLoaded'，（）=>{
b、 innerHTML=``
设el=document.createElement（'input'{
是：'我的输入'
})
el.type='text'
c、 儿童（el）
//不起作用：
设el2=document.createElement（'input'）
el2.setAttribute（'is'，'my input'）
el2.type='text'
d、 儿童（el2）
})
div{
边框：3个点#999；
填充：10px；
}
div：：之前{
内容：“属性（id）”；
}
.连接{
背景色：石灰；
}

我不知道Angular应该如何“支持”定制的内置代码-任何框架/库/第三方代码，它们应该只是一个HTML元素，ofc可以工作。它对我来说不起作用，而是表明您的传输/捆绑设置工作不正常。您是否使用Typescript与Angular代码一起编译webcomponent？我的理解是，自定义元素在浏览器级别（在某些浏览器中）是受支持的，我只需将其导入到一个普通HTML文件中，就可以使这段代码正常工作。我的假设是，将此代码移动到Angular将继续工作，而不需要任何类型的传输或构建。同样，在我的示例中，如果我创建了一个自定义元素，而不尝试扩展元素，它将以角度工作。第二次尝试使用{extends:'p'}时，它停止工作。我不认为我需要做任何特定的事情来让它在Angular中工作。你能创建一个StackBlitz来展示这个问题吗？当然-这里有一个它在Angular之外工作的例子这里Angular中的相同组件不工作（我还添加了自定义元素\u模式）让我知道我的答案是否对你有帮助，因为我也很好奇如何让它工作。这是完美的，正是我想要的。我真的很感谢@connexo提供的所有帮助和理解我的闲话。这真的很有帮助，如果可以的话，我会投票10次。苗条也有同样的问题。