Blazor 연구소

[jamesnet214]

6. 격리된 CSS에서 자식 접근 하기 (razor.css)

---

이 방법을 몰라서 dotnet/aspnetcore 레포 문 앞까지 다녀왔습니다. (눈물)

결론부터 말하면 격리된 CSS에서도 아래와 같이 ::deep을 통해 자식 요소를 찾는 것이 가능합니다.

::deep

아래 razor.cs 내용을 통해 이를 확인할 수 있습니다.

.vote {
    ...
}
    .vote:hover {
        ...
    }
    .vote ::deep svg {
        width: 14px;
        height: 14px;
        margin-right: 2px;
    }
        .vote ::deep svg path {
            fill: #CCCCCC;
        }

.vote-checked {
   ...
}
    .vote-checked ::deep svg path {
        fill: #0969DA !important;
    }

svg, path는 .vote 컴포넌트의 내부에 자리하고 있기 때문에, 격리된 CSS에서는 기본적으로 접근을 허용하지 않습니다.

그래서 이 때 ::deep을 통해 하위 요소의 접근이 가능해집니다.

---

이 방법은 @naratteu 님의 도움을 받았습니다.

Razor에도 CSS 격리가 있었네요

Razor에 포함된 하위 자식까지는 적용이 되는 게 맞지 않나 싶은데 그건 안 돼더라고요. ::deep은 안먹나요?

이제, 저는 글로벌 css에 의존하지 않고도 컴포넌트를 분산화 시킬 수 있겠네요.

다음 스포일러는 지금까지 연구된 기술을 바탕으로 ToggleButton을 한번 만들어 볼 계획입니다. (이미 만들어 놨지만…) 독립된 컴포넌트, 양방향 바인딩과 razor.css를 통해 제가 어떻게 컴포넌트를 설계 했을지 살펴보는 시간이 되겠습니다.