能否用Stencil/Polymer创建可嵌套独立Web组件并混合常规HTML？原生组件可行吗？

绝对没问题！不管是原生Web组件标准，还是Stencil、Polymer（包括它的现代继任者Lit），都完全支持你想要的这种「嵌套自定义Web组件+混合常规HTML内容」的场景。我给你逐个拆解说明：

原生Web组件标准（Custom Elements + Shadow DOM）本身就原生支持这种场景，核心是利用<slot>元素来实现内容分发——它能让你把自定义组件内部的子元素（不管是常规HTML标签还是其他自定义组件）插入到组件Shadow DOM的指定位置。

举个简单的原生实现示例：

// 定义<comp-avatar>组件
class CompAvatar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .avatar { border-radius: 50%; overflow: hidden; width: 64px; height: 64px; }
      </style>
      <div class="avatar">
        <slot></slot> <!-- 用来接收内部的<img>标签 -->
      </div>
    `;
  }
}
customElements.define('comp-avatar', CompAvatar);

// 定义<comp-text-box>组件
class CompTextBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .text-box { padding: 16px; font-family: sans-serif; }
      </style>
      <div class="text-box">
        <slot></slot> <!-- 用来接收内部的<p>标签 -->
      </div>
    `;
  }
}
customElements.define('comp-text-box', CompTextBox);

// 定义<comp-card>组件
class CompCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .card { border: 1px solid #eee; border-radius: 8px; padding: 20px; max-width: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
      </style>
      <div class="card">
        <slot></slot> <!-- 用来接收内部的<comp-avatar>和<comp-text-box> -->
      </div>
    `;
  }
}
customElements.define('comp-card', CompCard);

使用的时候完全按照你给出的示例写法即可：

<comp-card>
  <comp-avatar>
    <img src="your-avatar-url.jpg" alt="User avatar">
  </comp-avatar>
  <comp-text-box>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </comp-text-box>
</comp-card>

Stencil是基于原生Web组件标准构建的工具链，它不仅完全支持这种嵌套场景，还提供了更简洁的TypeScript/JSX语法和开箱即用的特性优化。

示例实现（每个组件单独文件）：

// comp-avatar.tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'comp-avatar',
  styleUrl: 'comp-avatar.css',
  shadow: true
})
export class CompAvatar {
  render() {
    return <div class="avatar"><slot></slot></div>;
  }
}

/* comp-avatar.css */
.avatar {
  border-radius: 50%;
  overflow: hidden;
  width: 64px;
  height: 64px;
}

// comp-text-box.tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'comp-text-box',
  styleUrl: 'comp-text-box.css',
  shadow: true
})
export class CompTextBox {
  render() {
    return <div class="text-box"><slot></slot></div>;
  }
}

/* comp-text-box.css */
.text-box {
  padding: 16px;
  font-family: sans-serif;
}

// comp-card.tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'comp-card',
  styleUrl: 'comp-card.css',
  shadow: true
})
export class CompCard {
  render() {
    return <div class="card"><slot></slot></div>;
  }
}

/* comp-card.css */
.card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

使用方式和你给出的示例完全一致，Stencil会编译成符合标准的原生Web组件，同时还支持props、事件、生命周期钩子等高级特性。

Polymer是最早推动Web组件生态的框架之一，现在它的现代继任者是Lit——一个轻量、高性能的Web组件库，同样完全支持你的需求。

示例实现（用Lit）：

// comp-avatar.js
import { LitElement, html, css } from 'lit';

class CompAvatar extends LitElement {
  static styles = css`
    .avatar {
      border-radius: 50%;
      overflow: hidden;
      width: 64px;
      height: 64px;
    }
  `;

  render() {
    return html`<div class="avatar"><slot></slot></div>`;
  }
}
customElements.define('comp-avatar', CompAvatar);

// comp-text-box.js
import { LitElement, html, css } from 'lit';

class CompTextBox extends LitElement {
  static styles = css`
    .text-box {
      padding: 16px;
      font-family: sans-serif;
    }
  `;

  render() {
    return html`<div class="text-box"><slot></slot></div>`;
  }
}
customElements.define('comp-text-box', CompTextBox);

// comp-card.js
import { LitElement, html, css } from 'lit';

class CompCard extends LitElement {
  static styles = css`
    .card {
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 20px;
      max-width: 300px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  `;

  render() {
    return html`<div class="card"><slot></slot></div>`;
  }
}
customElements.define('comp-card', CompCard);

使用方式依然和你的示例一致，Lit提供了声明式的模板语法和高效的DOM更新，是构建Web组件的现代首选之一。

总结来说：不管是原生标准还是你提到的Stencil、Polymer/Lit，都能完美实现你想要的组件嵌套+混合HTML内容的场景，核心都是利用原生的<slot>机制来完成内容分发。

内容的提问来源于stack exchange，提问作者vlasterx