嵌套Web组件并将其与常规HTML混合

Question

是否可以使用模板或聚合物创建独立的Web组件，然后将它们一个嵌套在另一个组件中？另外，是否可以将所有这些与常规HTML内容混合在一起？

我们在这里将有 3 个独立的组件，具有独特的样式和功能。

• <comp-card>
• <comp-avatar>
• <comp-text-box>

它们应该嵌套在常规HTML中，例如：

<comp-card>
<comp-avatar>
<img src="...">
</comp-avatar>
<comp-text-box>
<p>lorem ipsum</p>
</comp-text-box>
</comp-card>

今天，使用本机 Web 组件是否可以实现这一目标？

Answer 1

我不确定本机Web组件，但在聚合物中绝对是可能的。例如，我的主要聚合物应用程序文件包含：

<module-landing>
<firebase-content path="pages/home/tagline"></firebase-content>
</module-landing>

在我的自定义模块登陆中，有：

<template>
<style>
...
</style>

<module-inner size="1140px">
<h1 id="title">
<slot></slot>
</h1>
<img id="goDown" class="icon" src="" on-click="raiseCurtain">
</module-inner>
</template>

<script>
/**
* `module-landing`
* Full screen landing element with an arrow that scrolls itself out of the way, content is loaded through Firebase (requires firebase to be initialised in main app)
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class ModuleLanding extends Polymer.Element {
static get is() { return 'module-landing'; }
static get properties() {
return {
height: {
type: Number
}
};
}
ready(){
super.ready();
this.height = this.offsetHeight;
this.$.goDown.src = this.resolveUrl("assets/white-down-arrow.png");
}
raiseCurtain(){
window.scroll({ top: this.height, left: 0, behavior: 'smooth' });        
}
}
window.customElements.define(ModuleLanding.is, ModuleLanding);

(请注意插槽标签，该标签指示嵌套在主文件中自定义元素中的内容应出现的位置，以及插入到平台中的模块内部自定义元素)。