我一直在阅读，但我没有找到任何东西，如果有可能在不同的 html 文件中定义并使用 ESModule 导入以与 shadowRoot 一起使用，可能吗？
index.html，我在其中定义了 2 个 javscript 模块并使用了我的组件<hello-world></hello-world>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Component</title>
<meta name="description" content="My First Component">
<meta name="author" content="Ismael Rodriguez">
<script type="module" src="js/my-template.js"></script>
<script type="module" src="js/component.js"></script>
<!--
<template id="my-template">
<h2>Hello World</h2>
</template>
-->
</head>
<body>
<h1>Web Component</h1>
<hello-world></hello-world>
</body>
js/my-template.js，在这个模块中只导出一个带有标签 html 的字符串。
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
js/component.js，最后导入模块my-template.js。我发现这种方法可以使用 ESmodule 从我的模块中解释模板。我如何导入模板并在我的组件中使用（支持 Firefox）？ …
我有一个问题，将某些值从父组件传递到子组件并显示该值的最佳方法是什么，因为我尝试使用属性和插槽传递值，并且两种方法都有效。属性：我有一个运动列表，并在父组件中使用repeatlit-html （和html渲染方法），以便创建 n 个子组件，并给出它们属性中的值。
//father component
render(){
return html`
${repeat(movements, movement => movement.id, (movement, index)=> html`
<movement
.id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}>
</movement>
<hr>
`)}
`
}
//child component
render(){
return html`
<dt>${this.id}</dt>
<dl>${this.description}</dl>
<dl>${this.amount}</dl>
<dl>${this.balance}</dl>
`;
}
插槽：我有一个运动列表，并在父组件中使用repeatlit-html （和html渲染方法），以便创建 n 个子组件，并给出在子组件中声明的插槽中的值
//child component
render(){
return html`
<dd>
<slot name="id"></slot>
<slot name="description"></slot>
<slot name="amount"></slot>
<slot name="balance"></slot>
</dd>
`;
}
//father component
render(){
return html`
${repeat(movements, movement=>movement.id, (movement, index)=>html`
<movement>
<dt slot="id"> ${movement.id} </dt> …我试图弄清楚为什么当我单击某个特定组件时，它的同级组件也会呈现
function CountButton({increment, count, number}) {
console.log(`Render CountButton ${number}`)
return <button onClick={() => increment(count + 1)}>{count}</button>
}
function DualCounter() {
const [count1, setCount1] = React.useState(0)
const increment1 = React.useCallback(() => setCount1(c => c + 1), [])
const [count2, setCount2] = React.useState(0)
const increment2 = React.useCallback(() => setCount2(c => c + 1), [])
console.log('Render DualCounter')
return (
<>
<CountButton count={count1} increment={increment1} number={1} />
<CountButton count={count2} increment={increment2} number={2} />
</>
)
}
我使用useCallback并传递这些函数来避免在任何渲染中函数引用将是不同的引用。