How can I create a web component with an isolated CSS environment?

I want my component not to be using CSS framework, as well as not destroyed by any global CSS's.

Actually, I want to remake this component, but not being forced to install Tailwind.

It needs no reactivity, so I prefer it not to be bloated; but it does need some CSS styling, and it want to use it regardless of outside CSS environment.

It seems that IFrame is a way. Another way seems to be this.attachShadow({ mode: 'open' })?