Javascript 如何重新呈现web组件的单个元素？

我正在创建一个web组件，希望显示选定的项目。 有一个父组件从api获取数据，并创建一个填充了该数据的组件。这是一个非常精简的版本，但你应该得到的问题

父组件看起来像

const myComponent = document.createElement('template');

class MyComponent extends HTMLElement {
    render(el) {
        if (this.selectedItems.length === 0) {
            selectedContent = `Nothing selected!`;
        } else {
            selectedContent = `<p>Selected:</p>`;
            selectedContent += `<ul>`;
            for (let item of this.selectedItems) {
                selectedContent += `<li>${item.name}</li>`;
            }
            selectedContent += `</ul>`;
        }

        el.shadowRoot.innerHTML = `
            <div>
                <child-component data="${el._data}"></child-component>
                ${selectedContent}
            </div>`;
    }

    constructor() {
        super();

        let self = this;

        self.myService= new MyService();
        self.myItemsList= [];
        self.selectedItems = [];
        self.attachShadow({mode: 'open'});

        self.fetchData(self);
        self.setupEventListeners(self);
    }

    async fetchData(self) {
        try {
            const response = await self.myService.getData();
            const items = response.data;
            items.forEach((item) => {
                self.myItemsList.push({item});
            });
            self.render(self);
        } catch (error) {
            console.log(error);
        }
    }

    setupEventListeners(self) {
        EventBus.addEventListener("my-custom-event", (event) => {
            const item = event.target;
            if (item.active === true) {
                    self.selectedItems = _.reject(self.selectedItems, (element) => {
                        return element.name === self.myItemsList[item.position].name;
                    });
                    self.myItemsList[item.position].checked = false;
            } else if (item.active === false) {
                    self.selectedItems.push(item);
                    self.myItemsList[item.position].checked = true;
            } 
            self.render(self);
        });
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
        if (oldVal !== newVal) {
            this[`_${attrName}`] = newVal;
            this.render(this);
        }
    }

    connectedCallback() {
        this.render(this);
        this.appendChild(myComponent.content.cloneNode(true));
    }
}

window.customElements.define("bootstrap-card-parent", BootstrapCardParent);

const myComponent=document.createElement（'template'）；
类MyComponent扩展了HtmleElement{
渲染（el）{
if（this.selectedItems.length==0）{
selectedContent=`未选择任何内容！`；
}否则{
selectedContent=`Selected:
`；
所选内容+=`
`；
for（让此项中的项选择EditEMS）{
selectedContent+=`
${item.name}
`；
}
所选内容+=`
`；
}
el.shadowRoot.innerHTML=`
${selectedContent}
`;
}
构造函数（）{
超级（）；
让自我=这个；
self.myService=newmyservice（）；
self.myItemsList=[]；
self.selectedItems=[]；
attachShadow（{mode:'open'}）；
self.fetchData（self）；
self.setupEventListeners（self）；
}
异步获取数据（自）{
试一试{
const response=wait self.myService.getData（）；
const items=response.data；
items.forEach（（项目）=>{
self.myItemsList.push（{item}）；
});
self.render（self）；
}捕获（错误）{
console.log（错误）；
}
}
setupEventListeners（自身）{
EventBus.addEventListener（“我的自定义事件”，（事件）=>{
const item=event.target；
如果（item.active==真）{
self.selectedItems=\uu0.reject（self.selectedItems，（元素）=>{
return element.name==self.myItemsList[item.position].name；
});
self.myItemsList[item.position].checked=false；
}else if（item.active==false）{
self.selectedItems.push（项目）；
self.myItemsList[item.position].checked=true；
} 
self.render（self）；
});
}
attributeChangedCallback（属性名称、旧值、新值）{
if（oldVal！==newVal）{
这个[`{attrName}`]=newVal；
这个,渲染(这个),；
}
}
connectedCallback（）{
这个,渲染(这个),；
this.appendChild（myComponent.content.cloneNode（true））；
}
}
window.customElements.define（“引导卡父项”，引导卡父项）；

子组件：

const myComponentChild = document.createElement('template');


class MyChildComponent extends HTMLElement {
    render(el) {
        el.shadowRoot.innerHTML = `
            <div>${el._data}</div>
            <input type="checkbox"
onchange="MyChildComponent.onAddToSelectedRequest(${el._data})">`;
    }

    static get observedAttributes() {
        return ['data'];
    }

    constructor() {
        super();
        this.attachShadow({mode: 'open'});
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
        if (oldVal !== newVal) {
            this[`_${attrName}`] = newVal;
            this.render(this);
        }
    }

    connectedCallback() {
        this.render(this);
        this.appendChild(myComponentChild.content.cloneNode(true));
    }

    static onAddToSelectedRequest(someData) {
        EventBus.dispatch("my-custom-event", someData);
    }
}

window.customElements.define("my-child-component", MyChildComponent);

const myComponentChild=document.createElement（'template'）；
类MyChildComponent扩展了HtmleElement{
渲染（el）{
el.shadowRoot.innerHTML=`
${el.\u data}
`;
}
静态get ObservedAttribute（）{
返回['data']；
}
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
}
attributeChangedCallback（属性名称、旧值、新值）{
if（oldVal！==newVal）{
这个[`{attrName}`]=newVal；
这个,渲染(这个),；
}
}
connectedCallback（）{
这个,渲染(这个),；
this.appendChild（myComponentChild.content.cloneNode（true））；
}
静态onAddToSelectedRequest（某些数据）{
调度（“我的自定义事件”，someData）；
}
}
定义（“我的子组件”，MyChildComponent）；

---

目前，我在EventListener中调用

self.render（self）

，以重新启动页面以查看我的数据。难道没有办法只重新播放所选项目数组的内容吗？

让您的子元素侦听事件。看我是否理解正确，您要执行以下操作：-获取项目列表-使用这些项目填充

-选择项目-使用所选项目填充

items@StefanN是的，就是这样@Danny'365CSI'Engelman我不明白这个问题如何帮助meI个人不认为您需要父组件。它只获取数据并将其传递给子组件。你也可以在应用程序中处理。然后，您可以创建一个更通用的组件（即列表组件），该组件处理显示数据，并添加一个布尔参数以将项目标记为选定项。