Stimulus框架中Target是否必须嵌套在Controller所在DOM元素下？

问题背景 #

我查阅的所有Stimulus控制器与Target构建示例及教程中，Target均嵌套在声明了data-controller的父元素下，比如官方手册的示例：

<div data-controller="slideshow">
  <button data-action="slideshow#previous"> ← </button>
  <button data-action="slideshow#next"> → </button>
  <div data-slideshow-target="slide">🐵</div>
  <div data-slideshow-target="slide">🙈</div>
  <div data-slideshow-target="slide">🙉</div>
  <div data-slideshow-target="slide">🙊</div>
</div>

想请教：是否存在Target必须嵌套在Controller元素下的硬性规则或建议？能否使用以下非嵌套结构：

<div data-controller="slideshow">
  <button data-action="slideshow#previous"> ← </button>
  <button data-action="slideshow#next"> → </button>
</div>
<div id="someOtherDiv">
  <div data-slideshow-target="slide">🐵</div>
  <div data-slideshow-target="slide">🙈</div>
  <div data-slideshow-target="slide">🙉</div>
  <div data-slideshow-target="slide">🙊</div>
</div>

回答 #

Stimulus并没有强制要求Target必须嵌套在data-controller元素下，但嵌套结构是官方明确推荐的最佳实践，原因如下：

• 作用域清晰：控制器默认只在自身元素的子节点范围内查找Target，避免和页面上其他同控制器实例的Target产生冲突——比如页面存在多个slideshow实例时，嵌套结构能确保每个实例只管理自己的slide。
• 语义直观：DOM结构直接反映控制器的管辖范围，后续维护时能快速理解逻辑关联。
• 性能更优：缩小Target的查找范围，比全局查找更高效。

至于非嵌套结构，技术上是可行的，但不推荐。如果一定要这么做，你需要在控制器代码中手动获取外部Target，而非依赖Stimulus自动绑定的this.slideTargets，示例代码如下：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 手动查找页面上所有符合条件的slide Target
    this.slides = document.querySelectorAll("[data-slideshow-target='slide']")
  }

  next() {
    // 这里编写操作slides的逻辑
  }
}

但这种方式存在明显弊端：

• 若页面有多个slideshow实例，会获取到所有实例的Target，导致逻辑混乱；
• 无法利用Stimulus提供的Target自动更新、监听DOM变化等特性；
• DOM结构与控制器逻辑的关联变得隐晦，增加维护成本。

总结：除非有特殊业务场景需求，否则强烈遵循官方推荐的嵌套结构；若必须使用非嵌套Target，一定要做好作用域隔离，避免冲突。

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