在本步骤中，花点时间确认 disconnect() 和 reconnect 生命周期是否按预期工作。

向示例元素添加一些代码，使其从 DOM 中移除宿主元素一秒钟，然后再放回去。在 time-ago-example 元素的模板中，向 <p> 添加 @click 事件监听器：

    return html`
      <p @click=${this.handleClick}>
        This page was rendered ${timeAgo(timeCreated)}.
      </p>
    `;

然后向类中添加此方法。如你所见，宿主元素将被移除，然后一秒钟后重新插入到 DOM 中：

  handleClick() {
    const parent = this.parentNode;
    this.remove();
    setTimeout(() => parent!.appendChild(this), 1000);
  }

  handleClick() {
    const parent = this.parentNode;
    this.remove();
    setTimeout(() => parent.appendChild(this), 1000);
  }

接下来，在我们的 time-ago 指令类中，向 ensureTimerStarted 和 ensureTimerStopped 添加一些日志语句：

  ensureTimerStarted() {
    console.log('timer started');
    ...
  }

  ensureTimerStopped() {
    console.log('timer stopped');
    ...
  }

如果你打开开发者工具，你应该能在初始渲染后看到一条日志：

timer started

当你点击示例元素中渲染的文本时，元素将断开连接一秒钟，然后重新连接。你应该能看到两条额外的日志，一条用于断开连接，另一条用于重新连接：

timer stopped
timer started

如果你注释掉 handleClick 中重新连接元素的最后一行并点击文本，你应该能看到日志表明定时器已停止且未重新启动——确认如果渲染该指令的元素被丢弃，指令将被正确清理。