Caputchin
组件自定义

用 CSS 给组件设样式

组件在一个开放的 shadow root 里渲染，并给你两种从你自己的页面给它设样式的方式：shadow part（用 ::part() 瞄准一个元素）和 CSS 自定义属性（用 --cpt-skin-* 覆盖一个颜色）。对于颜色和措辞，优先用 白标（它就是为那个而造的，并随每一次嵌入一起旅行）；当你想要一个页面本地的微调、或某个白标不覆盖的东西时，再去用这里的 CSS 面。

这只是组件外壳。游戏跑在一个你无法从页面设样式的、独立的沙箱化的框里。

瞄准一个 part

用 ::part(name) 在元素上选一个 part：

caputchin-widget::part(simple-checkbox) {
  border-radius: 1rem;
}

caputchin-game::part(game-frame) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

几个实用的注意点：

  • shadow root 是开放的，所以从你页面来的 ::part() 在每个现代浏览器里都能用。
  • 一些结构性的 part（复选框容器、游戏框）带着内联应用在元素上的基础布局样式。要覆盖那些属性之一，你可能需要 !important，因为一个内联样式压过一条普通的 ::part() 规则。文本和品牌 part 不用它就能干净地设样式。
  • part 就是那个设样式的面；组件不暴露它的内部类名，而它们可能会变。按 part 设样式，不要靠扒进 shadow 树。

复选框组件上的 part

这些出现在 <caputchin-widget> 上（以及 <caputchin-game> 的赛前覆盖层上，它复用同一个品牌块）。

Part它是什么
simple-checkbox外层复选框容器（边框、背景、内边距）。
simple-shield-box显示验证状态的盾形指示器。
simple-shield-spinner验证时盾形里面的旋转弧。
simple-checkbox-label状态文本（验证、正在验证、已验证、失败）。
simple-brand品牌块（徽标、名称和标语在一起）。
simple-brand-home包住徽标和名称的链接，指向主页链接。
simple-brand-logo品牌徽标图像。
simple-brand-name品牌字标文本。
simple-brand-tag品牌标语行，一个指向法律链接的链接。

游戏组件上的 part

这些出现在 <caputchin-game> 上，环绕那个沙箱化的游戏框。

Part它是什么
game-frame游戏周围的外饰框。
game-iframe-slot持有游戏沙箱化 iframe 的那个槽。
game-slot游戏渲染进去的那个投影容器。
game-badge-slot显示在游戏下方的品牌徽章。
game-overlay-host赛前覆盖层的宿主（在游戏开始前显示）。
game-overlay-checkbox那个覆盖层里的复选框。
game-overlay-dialog覆盖层对话框，在 modal 和 fullscreen 布局里。
game-overlay-close覆盖层关闭按钮，仅在 modal 和 fullscreen 布局里。

颜色变量

组件把它解析出的外壳颜色作为命名为 --cpt-skin-<token> 的 CSS 自定义属性写到宿主元素上，而它自己的样式读它们。你可以从你的样式表通过在元素上设置那个属性来覆盖单个颜色：

caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}

那个 !important 要紧：组件在解析皮肤时把这些属性内联设在宿主上，而一个内联值压过一条普通的样式表规则，所以一个普通的覆盖会被忽略。这些只是外壳的颜色；它们不到达框里面的游戏。

这是那个页面本地的逃生舱口。要在每一次嵌入上更改颜色，改 在白标里设一个皮肤；它用同样的 token 名。

变量它给什么上色
--cpt-skin-primary主操作色：激活的盾形、聚焦环和已验证状态。
--cpt-skin-primary_hover主色的悬停变体。
--cpt-skin-surface_bg组件的背景。
--cpt-skin-text_primary主文本。
--cpt-skin-text_label状态标签文本（验证、正在验证，等等）。
--cpt-skin-text_muted次要文本，包括品牌标语。
--cpt-skin-text_passive组件等待时的盾形轮廓。
--cpt-skin-separator紧凑布局里品牌各块之间的分隔。
--cpt-skin-border组件的边框。
--cpt-skin-glyph盾形里面画的对勾或警示字形。
--cpt-skin-error错误状态色。
--cpt-skin-shadow组件的投影。
--cpt-skin-modal_backdropmodal 布局游戏覆盖层背后的背幕。
--cpt-skin-fullscreen_backdropfullscreen 布局游戏覆盖层背后的背幕。
--cpt-skin-close_btn_bgfullscreen 覆盖层关闭按钮的背景。
--cpt-skin-brand_text品牌链接文本色。
--cpt-skin-brand_text_hover品牌链接悬停时的颜色。

品牌徽标是一个独立的皮肤 token（一个图像，不是一个颜色），所以它通过 白标 替换，而非 CSS。同样的 token 名及其亮和暗默认在 模式参考 里。

这些 --cpt-skin-* 变量只携带 组件外壳的 皮肤。一个 游戏 把它自己的皮肤作为交给它代码的值来接收（不是作为 CSS 变量，而且你无法从你的页面给一个游戏设样式）；见 自定义一个游戏的皮肤。

另见

给组件做白标

上一页

不用后端也能验证

下一页

本页内容

瞄准一个 part复选框组件上的 part游戏组件上的 part颜色变量另见