如何查询目标HTML元素？Web Component相关技术疑问

• 隔离DOM与样式，避免冲突
  传统开发中，组件的类名、样式很容易和全局环境或其他组件冲突，导致样式错乱、DOM查询混乱。Web Component通过Shadow DOM创建独立的封闭作用域，组件内部的DOM结构、CSS规则完全与外界隔离，既不会污染全局样式，也不会被全局样式影响，适合YouTube这类多模块的复杂应用。

• 实现跨框架/无框架的组件复用
  可以封装成独立的自定义元素，比如视频播放器、评论区组件，这类组件不依赖任何前端框架，能在React、Vue、Angular甚至纯HTML项目中直接使用，无需重复编写相似代码，大幅提升复用效率。

• 降低项目依赖，基于原生标准
  作为浏览器原生支持的技术标准，使用Web Component不需要引入额外的框架或库，能有效减少项目打包体积，同时避免框架版本迭代带来的组件迁移成本。

• 提升代码模块化与可维护性
  将UI结构、样式、逻辑封装在单个组件内，职责单一，代码结构清晰。在大型项目中，拆分后的组件更易定位问题、修改功能，团队协作效率更高。

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