TunkShif

Web Components 实际上是 Custom Elements, Shadow DOM 和 Templates and Slots 这几个 API 组成的一套技术，这几个都是比较 low level 的 API, 实际上开发的时候还是需要使用 Lit 或者 Stencil 这样的框架，另外像 Vue, Svelte 和 SolidJS 也都可以直接将组件导出成 Custom Element 。

目前个人感觉 Shadow DOM 的坑还是挺多的，比如样式隔离的问题，外部的 CSS 无法作用于 Shadow DOM 内，要写出 Headless 的无样式组件比较困难，当前有 CSS ::part() 选择器的方案可以解决部分问题。还有 form 表单不会识别 Shadow DOM 内的 input 元素，似乎 ElementInternals 和 FormAssociated 这一 API 能解决。另外 Shadow DOM 的 SSR 方案可能也还得等到几家浏览器支持 Declarative Shadow DOM 了才能稳定。

目前我个人感觉 Web Components 适用的场景主要下面两个：
一是用来开发封装专门功能的复杂组件，可以很方便的集成到其它任何应用里使用，比如这个 Emoji Picker ( https://nolanlawson.github.io/emoji-picker-element/)，还有这个 Giscus 的评论组件 （ https://github.com/giscus/giscus-component ）。
另外一个就是用来实现一套完整的 Design System 的组件库，比如像 Material Design （ https://material-web.dev/），微软的 Fluent UI （ https://developer.microsoft.com/en-us/fluentui#/），不过 Fluent 2 改用 React 了。这种情况下我觉得特别适用于像 Django 或者 Ruby on Rails 这样传统的搞后端模板渲染的 Web 框架使用，替代 Bootstrap 这类的方案。
其余情况我还是建议 React, Vue 之类的吧。

另外如果感兴趣推荐参考一下 Shoelace （ https://shoelace.style/），我感觉是目前最完善的 Web Components 组件库，文档里对主题、动画、本地化定制，还有前面提到的表单的问题都有给出解决方案。

假定有 type A = { foo: string }, type B = { bar: string }, type C = A & B, const obj = { foo: "foo", bar: "bar" }
那么 let a: A = obj, let b: B = obj, let c: C = obj 都是成立的
即 obj 这个值的类型既可以是 A ，也可以是 B ，还可以是 C ，[TS Playground]( https://www.typescriptlang.org/play?#code/C4TwDgpgBAglC8UDeAoKUBmB7LAuKAzsAE4CWAdgOYoC+KKokUAQgsmlAEYCGx+RZKrXqNoAYTZwAZC3oBjLOSJQsnAFZtU6bHigAiHXoA0HHn31njp7gC98enjb3CUAGwjAo3fHESq1bh5c+Kx+6oGecvgSYWpAA)
因为 TypeScript 的类型系统是 [structural typing]( https://www.typescriptlang.org/play#example/structural-typing) 的，类型 type A = { foo: string } 并不是表示仅有 foo 这一个属性的对象才属于该类型，而是表示只要某对象含有 foo 这一个属性便属于该类型
所以属于类型 A 的值为含有 foo 属性的全体对象，属于类型 B 的值为含有 bar 属性的全体对象，那么属于 A 和 B 的交集类型的值则为同时含有 foo 和 bar 属性的全体对象

这个跟 TypeScript 的关系其实不大，Tailwind 的 LSP 可以支持根据正则来匹配要启用 Tailwind IntelliSense 的代码区域，详细可以参考 twin.macro 这个项目的 issue 来自己设置：
https://github.com/ben-rogerson/twin.macro/discussions/227

对于 OP 这种类似的需求，我个人的设置是像下图这样的：
https://imgur.com/5FRvbFU

在 Tailwind 的样式类的字符串前加一个 /* tw */ 的注释来标记启用 Tailwind IntelliSense ，相关的配置如下：

```json
{
"tailwindCSS.experimental.classRegex": [
"\\/\\* tw \\*\\/\\s+`([^`]*)"
]
}
```