[英]Nesting web components and mixing it with regular HTML
是否可以使用Stencil或Polymer創建獨立的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組件實現這一目標?
我不確定本機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);
(請注意插槽標簽,該標簽指示嵌套在主文件中自定義元素中的內容應出現的位置,而模塊內部的自定義元素將插入到着陸中)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.