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

Question

是否可以使用 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 组件实现这一目标吗？

Answer 1

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

<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);

（注意插槽标签指示嵌套在主文件中的自定义元素中的内容应该出现的位置，以及在着陆中插入的模块内部自定义元素）。

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

Nesting web components and mixing it with regular HTML

html

javascript

web-component

polymer

stenciljs