如何选中Lottie动画生成的svg元素并通过CSS设置圆角？

首先纠正判断误差：

1. CSS本身可以匹配页面加载后动态插入的DOM元素，「动态生成的节点选不到」不是样式失效的原因。
2. 写法不生效的核心原因：<lottie-player>是Web Components实现的自定义元素，内部渲染的SVG位于Shadow DOM隔离边界内，普通的后代选择器lottie-player svg无法穿透Shadow DOM，自然匹配不到目标节点。

纯CSS实现方案 #

• 优先推荐：宿主元素裁剪法
  无需感知内部DOM结构，直接给lottie-player元素本身设置圆角和溢出隐藏，超出圆角的动画内容会被自动裁剪，兼容性最好、实现成本最低：

lottie-player {
  border-radius: 9px;
  overflow: hidden;
  /* 部分浏览器裁剪异常时，加此行触发独立渲染层即可修复 */
  transform: translateZ(0);
}

• 备选：直接选中内部SVG设置样式
  lottie-player遵循CSS Part规范对外暴露了内部SVG的选择入口，用::part(svg)伪元素可以穿透Shadow DOM边界，直接给SVG节点加圆角：

lottie-player::part(svg) {
  border-radius: 9px;
  overflow: hidden;
}

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