组件props
<page-route> 允许您直接使用 component 属性传递组件构造函数/类引用，而不是使用带有文件路径字符串的 src 属性。
捆绑应用程序时强烈建议使用这种方法，因为它提供编译时类型检查和强大的源映射。
typescript
import { html } from '@beforesemicolon/web-component'
import { HomePage } from './pages/HomePage'
import { AboutPage } from './pages/AboutPage'
// Render route tags using Component imports directly
html`
<page-route path="/" component="${HomePage}"></page-route>
<page-route path="/about" component="${AboutPage}"></page-route>
`component props的优点
- 类型安全： TypeScript 在编译时验证类引用。
- IDE 帮助： 自动完成和符号重命名本身即可工作。
- Tree-Shaking： 静态导入允许捆绑器淘汰未使用的代码。
- HMR 支持： 开发过程中更快的热模块更换。
组件格式
传递给 component 属性的值可以是：
1. 普通 HTML 字符串
typescript
export default '<h2>Welcome Home</h2>'2.Markup 模板文字
typescript
import { html } from '@beforesemicolon/web-component'
export default html`<h2>Welcome Home</h2>`3. 原生DOM节点
typescript
const container = document.createElement('div')
container.textContent = 'Welcome Home'
export default container4. 上下文加载函数
接收导航数据、路径参数和搜索查询并返回上述任何格式的函数：
typescript
export default (data, params, query) => {
return html`
<h2>Welcome ${data.username}</h2>
<p>Viewing item ID: ${params.itemId}</p>
<p>Active filter: ${query.filter}</p>
`
}