3. 基础槽位实现

3.1 槽位原理与映射关系

Material Design 的 TopAppBar 在实现层面将 UI 划分为三个固定的逻辑区域，称为“槽位（Slot）”。每个槽位对应一个独立的 DOM 容器，由 MDCTopAppBar 组件内部管理其布局与交互。开发者的定制工作就是向这三个容器中填充内容，并建立数据绑定。

绑定机制的关键在于：MDCTopAppBar 在初始化时会扫描指定根元素下的这些 CSS 类名，自动将对应 DOM 节点注册到内部槽位管理器中。开发者只需保证这些类名存在于预期位置，组件即可完成内容替换与事件委托。

3.2 实现流程

1. 构建基础 HTML 骨架：在 TopAppBar 容器内按顺序声明导航图标、标题、动作按钮三个 DOM 节点，并赋予正确的 CSS 类名。
2. 填充默认内容：为导航图标槽和动作按钮槽添加 Material Icons 图标元素；为标题槽添加文本内容。
3. 初始化 MDCTopAppBar 组件：通过 JavaScript 将 MDCTopAppBar 绑定到容器元素上，触发槽位注册。
4. 替换内容验证：在运行时通过 DOM API 或框架模板引擎替换槽位内容，观察组件是否正确响应。

3.3 完整代码实现

以下是一个基于纯 HTML + MDC Web 的完整示例，展示了三个基础槽位的绑定与内容替换。

<!-- TopAppBar 基础结构 -->
<header class="mdc-top-app-bar" id="app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <button class="material-icons mdc-top-app-bar__navigation-icon">menu</button>
      <span class="mdc-top-app-bar__title">我的应用</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <button class="material-icons mdc-top-app-bar__action-item" aria-label="收藏">favorite</button>
      <button class="material-icons mdc-top-app-bar__action-item" aria-label="搜索">search</button>
    </section>
  </div>
</header>

// JavaScript 初始化
import { MDCTopAppBar } from '@material/top-app-bar';

const topAppBarElement = document.getElementById('app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

// 示例：动态替换标题
function updateTitle(newTitle) {
  const titleElement = topAppBarElement.querySelector('.mdc-top-app-bar__title');
  if (titleElement) {
    titleElement.textContent = newTitle;
  }
}

// 示例：动态替换导航图标
function updateNavIcon(iconName) {
  const navIcon = topAppBarElement.querySelector('.mdc-top-app-bar__navigation-icon');
  if (navIcon) {
    navIcon.textContent = iconName;
  }
}

// 示例：动态替换动作按钮（先清除再新增）
function replaceActionButtons(iconList) {
  const section = topAppBarElement.querySelector('.mdc-top-app-bar__section--align-end');
  section.innerHTML = '';
  iconList.forEach(icon => {
    const btn = document.createElement('button');
    btn.className = 'material-icons mdc-top-app-bar__action-item';
    btn.textContent = icon;
    section.appendChild(btn);
  });
}

3.4 调试与验证

• 在浏览器 DevTools 中检查 .mdc-top-app-bar__row 内部的三个子节点是否均渲染且宽度正确。
• 点击导航图标按钮，确认 MDCTopAppBar:nav 事件被触发。
• 替换标题文本后，检查标题元素是否垂直居中且无多余白边。

// 验证事件绑定
topAppBar.listen('MDCTopAppBar:nav', () => {
  console.log('导航图标被点击');
});

// 手动触发替换测试
updateTitle('新标题');
updateNavIcon('arrow_back');
replaceActionButtons(['more_vert', 'share']);

3.5 常见错误

3.6 性能与稳定性建议

• 避免在运行时频繁替换整个动作按钮槽，推荐使用隐藏/显示已有按钮的方式切换。
• 标题槽仅接受纯文本，不要插入复杂的 DOM 树，防止破坏组件的垂直居中计算。
• 导航图标槽若使用自定义 SVG 代替 Material Icons，需确保 SVG 尺寸为 24x24 并设置 fill: currentColor 以继承主题色。

// 推荐的高效替换方式：复用已有按钮
function toggleActionButtonVisibility(buttonIndex, visible) {
  const buttons = topAppBarElement.querySelectorAll('.mdc-top-app-bar__action-item');
  if (buttons[buttonIndex]) {
    buttons[buttonIndex].style.display = visible ? '' : 'none';
  }
}