컨테이너 쿼리와 템플릿 연동하기

컴포넌트 템플릿을 리팩토링해서 컨테이너 쿼리를 더 잘 지원하고 싶습니다. 컨테이너를 자기 자신에 대해 쿼리할 수 없었기 때문에 몇 가지 추가 래퍼가 필요합니다. 하지만 이렇게 하면 래핑 요소의 이름을 어떻게 지어야 할지 고민이 됩니다. 제 템플릿을 보면 보통 가장 바깥 요소에 wrapper, 안쪽 요소에 container라는 이름을 붙이는 것이 저의 일반적인 네이밍 규칙입니다.

.component {
  &__wrapper {
  }
  &__container {
  }
}

이 방식은 꽤 잘 맞는다고 생각했습니다. 하지만 컨테이너 쿼리를 사용하려면 항상 바깥쪽 요소를 컨테이너로 선언해야 합니다. 래퍼를 컨테이너로 선언하는 것은 직관적이지 않을 수 있습니다. 아래처럼 보이는 것이 훨씬 낫습니다:

image

혹시 이 부분에 대해 컨벤션이나 좋은 접근 방식에 대해 생각해 본 분이 있을까요? 아마 제가 너무 과민반응하는 것일지도 모르겠습니다 :thinking: 하지만 템플릿을 리팩토링하면 브레이킹 체인지가 되므로, 무턱대고 진행하고 싶지는 않습니다.

1개의 좋아요