如何调整Amazon Mechanical Turk <crowd-image-classifier>选项框布局

我通过JavaScript随机生成18个分类数组并传入<crowd-image-classifier>的categories属性，希望调整这些选项的展示方式，让所有选项一次性全部显示（比如分成两列，每列9个），避免工人需要上下滚动查看。当前布局带有滚动条，截图如下：

当前使用的代码如下：

<crowd-image-classifier
src="${image_url}"
header="What occupation do you think this person belongs to?"
name = "occupation"
id = "occupation">

<!-- 简短说明：工人在任务中会看到的快速指引，可包含示例 -->
<short-instructions>
<p>Please select one occupation that this person could conceivably belong to.</p>
<p></p>
</short-instructions>

<!-- 详细说明：工人可展开查看的完整指引 -->
<full-instructions header="Classification Instructions">
<p>Please select one occupation that this person could conceivably belong to.</p>
<p></p>
</full-instructions>

</crowd-image-classifier>

我曾尝试在顶部添加如下样式，但系统无法识别#occupation这个ID，没有任何样式变化：

<style>
#occupation {
  color: red;
  text-align: center;
}
</style>

解决方案 #

由于<crowd-image-classifier>是基于Shadow DOM的自定义元素，直接通过ID无法修改内部样式，需要用以下方式实现两列布局：

方法一：使用::part选择器（推荐）

如果组件支持part属性，可直接定位内部选项容器：

<style>
/* 定位分类选项容器，设置两列网格布局 */
crowd-image-classifier::part(options) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: none !important; /* 移除默认高度限制，取消滚动条 */
}

/* 调整单个选项的内边距，优化排版 */
crowd-image-classifier::part(option) {
  padding: 8px;
  box-sizing: border-box;
}
</style>

方法二：使用深度选择器

如果::part不生效，可尝试使用深度选择器穿透Shadow DOM：

<style>
/* 定位选项容器并设置两列布局 */
crowd-image-classifier >>> .options-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: unset !important;
}

/* 优化选项样式 */
crowd-image-classifier >>> .option {
  padding: 8px;
}
</style>

将上述样式代码添加到任务页面的头部，即可让18个分类选项以两列布局完整展示，无需滚动。

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