如何使用CSS隐藏web组件:host元素的滚动条，兼容Chrome、Safari等多浏览器

完整兼容写法 #

你需要先给:host配置基础的滚动容器属性，再针对不同内核写隐藏规则，完整可运行的CSS代码如下：

/* 第一步：先将host设为可滚动的块级容器，这是滚动条隐藏生效的前提 */
:host {
  display: block;
  overflow: auto;
  /* 适配旧版Edge、IE */
  -ms-overflow-style: none;
  /* 适配Firefox */
  scrollbar-width: none;
}

/* 第二步：适配Chrome、Safari等webkit内核浏览器 */
:host::-webkit-scrollbar {
  display: none;
}

常见不生效原因排查 #

• 没有给:host设置display: block：自定义元素默认display为inline，inline元素的overflow配置不生效，不会产生滚动条
• 滚动容器不是host本身：如果滚动行为发生在shadow root内部的子元素上，需要将::-webkit-scrollbar规则写在对应的子元素选择器上，而不是:host
• 写错选择器语法：:host()是带条件的宿主选择器，不需要加括号包裹伪元素，直接写:host::-webkit-scrollbar即可

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