Javascript Web组件如何为其设置值'；谁的孩子？

我试图创建一个web组件。组件刚刚有了进展。 下面是我的代码

MyElement类扩展了HtmleElement{
静态get ObservedAttribute（）{
返回['value']；
}
获取值（）{
返回此.hasAttribute（'value'）；
}
设定值（val）{
if（val）{
this.setAttribute（'value'，val）；
}
否则{
this.removeAttribute（'value'）
}
设定值（val）；
}
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
const t=document.querySelector（“#我的元素”）；
const instance=t.content.cloneNode（true）；
appendChild（实例）；
this.shadowDOM=shadowRoot；
}
attributeChangedCallback（名称、旧值、新值）{
if（该值）{
这个.setValue（newValue）；
}
}
//设置一个值以进行
设定值（val）{
//怎么办？
}
}
自定义元素。定义（'my-element'，MyElement）

指数
测试
功能测试（）{
//如何设置my元素的值？
}
：主持人{
位置：相对位置；
显示：块；
宽度：600px；
}
进展{
-webkit外观：无；
-moz外观：无；
}
进度：：-moz进度条{
背景：gainsboro；
宽度：300px；
高度：500px；
}
进度：：-moz进度值{
背景：绿色；
}
进度：：-webkit进度条{
背景：gainsboro；
宽度：300px；
高度：500px；
}
进度：：-webkit进度值{
背景：绿色；
}
我认为您只需要使用DOM并检索进度元素


MyElement类扩展了HtmleElement{
静态get ObservedAttribute（）{
返回['value']；
}
获取值（）{
返回此.hasAttribute（'value'）；
}
设定值（val）{
if（val）{
this.setAttribute（'value'，val）；
}
否则{
this.removeAttribute（'value'）
}
}
构造函数（）{
超级（）；
让shadowRoot=this.attachShadow（{mode:'open'}）；
const t=document.querySelector（“#我的元素”）；
const instance=t.content.cloneNode（true）；
appendChild（实例）；
this.shadowDOM=shadowRoot；
}
attributeChangedCallback（名称、旧值、新值）{
if（该值）{
这个.setValue（newValue）；
}
}
//设置一个值以进行
设定值（val）{
const progress=this.shadowDOM.lastElementChild；
progress.value=val；
}
}
自定义元素。定义（'my-element'，MyElement）

指数
测试
功能测试（）{
document.getElementById（“myElement”）.value=5；
}
：主持人{
位置：相对位置；
显示：块；
宽度：600px；
}
进展{
-webkit外观：无；
-moz外观：无；
}
进度：：-moz进度条{
背景：gainsboro；
宽度：300px；
高度：500px；
}
进度：：-moz进度值{
背景：绿色；
}
进度：：-webkit进度条{
背景：gainsboro；
宽度：300px；
高度：500px；
}
进度：：-webkit进度值{
背景：绿色；
}
那么您基本上希望自定义元素中的单向绑定不带库吗？@Randy yes，no libraries我更新了代码，希望结果与您之前看到的一样我可以问另一个问题吗？如果我想更改progress:：progress value的背景，我该怎么做？使用progress.style.*？您可以添加一个css类：progress.red:：-webkit progress值{background:red；}，然后将其与“progress.classList.add”（“red”）一起添加，以防更改DOM。切换此行：
const progress=this.shadowDOM.lastElementChild对于此行
const progress=this.shadowDOM.querySelector（'progress'）。这将确保您获得
元素。