CSS 부품의 올바른 이름

반응형

CSS 섀도 파트는 웹 구성 요소의 섀도 루트 내부에 요소를 노출시켜 CSS를 가진 소비자가 스타일링할 수 있도록 하는 데 사용된다. 하지만 우리는 이 부분을 뭐라고 부를 수 있을까요? 유효한 CSS 부품 이름을 구성하는 문자는 무엇입니까? 알아내려면 스펙에 뛰어들어야 했어!

토큰이 정확히 뭐죠? 이 페이지에서는 명확하지 않지만 ::part() 의사 선택기에 대한 사양을 살펴보면 다음과 같은 힌트를 얻을 수 있다.

::part() = ::part( <ident> )
                  ```

                  그것이 무엇이든 간에 그것은 동일성을 요구한다. 다행히도, 그것을 정의하는 페이지로 안내하는 링크가 있습니다.

                  완벽해! 그래서 부품 이름은 <ident-token> 문법에 부합해야 하는데, 그게 무슨 뜻일까요? 명세서의 <ident-token> 링크를 따라가 봅시다.

                  <div class="content-ad"></div>

                  이 페이지에서:

                  별로 도움이 안 되네요 "코드 포인트"에 대한 링크가 있습니다. 그래서 더 명확하게 할 수 있는지 봅시다. 링크는 다음 페이지로 이동합니다.

                  그래도 꽤 넓은 범위인 것 같아요. 위키피디아에 따르면:

                  그러면 어떤 유니코드 문자라도 CSS 부품 이름으로 사용할 수 있다는 뜻인가요? 나는 유니코드 전문가가 아니기 때문에 아직 명확하지 않다.

                  ## 다양한 문자로 실험하기

                  <div class="content-ad"></div>

                  브라우저에서 실제로 작동하는 것이 무엇인지 실험해 봅시다. 저는 다음 부품으로 샘플 커스텀 요소를 만든 후, 어떤 부분이 실제로 작동하는지 보기 위해 ::part()로 스타일링을 해보았습니다.

                  ```js
                   part="a"
                    part="a-b"
                     part="a_b"
                      part="a,b"
                       part="a.b"
                        part="a$b"
                         part="a+b"
                          part="a@b"
                           part="a?b"
                           ```

                           확실히 부품 이름에 문자를 사용할 수 없습니다. 브라우저는 기호를 좋아하지 않는데 솔직히 직관적으로 느껴집니다.

                           캐릭터를 좀 더 해볼까요?

                           ```js
                            part="á"
                             part="ñ"
                              part="ę"
                               part="Ф"
                                part="平"
                                 part="λ"
                                  part="ה"
                                   part="字"
                                   ```

                                   <div class="content-ad"></div>

                                   중단하지 않아도 괜찮을 것 같습니다. 이모티콘은요?

                                   ```js
                                    part=""
                                     part=""
                                      part=""
                                       part=""
                                        part=""
                                        ```

                                        완전 좋아요. 그래서 구두점을 제외한 모든 캐릭터가 좋은 것 같아. 사양에서 언급한 하위 유니코드 범위를 살펴보겠습니다. U+0000

                                        여기 하위 문자 포인트가 있는 문서가 있습니다. 이 범위 내에서 이전에 시도했던 여러 가지 기호가 나열되어 있습니다. 

                                        분명히 이 범위는 유효한 CSS 부품 이름을 반영하지 않습니다. 우리가 스펙에서 뭔가를 간과했거나 CSS 스펙에서 인수를 너무 일반적으로 정의했을 수도 있습니다. 물론 HTML 스펙이 더 잘 설명해줄 것입니다.

                                        <div class="content-ad"></div>

                                        이런...부품 속성에 대한 언급이 전혀 없습니다. 

                                        MDN 페이지를 통해 상황을 정리할 수 있는지 알아보죠.

                                        좋아, 하지만 유효한 부품 이름이란 뭐야?!

                                        ## MDN을 구출하다

                                        스펙상 뭐가 맞는지는 아직 잘 모르겠어요. 이제 MDN에 있는 ::part() 문서를 살펴보겠습니다. 이걸 찾았어 우리가 스펙에서 봤던 거랑 많이 닮았어!

                                        <div class="content-ad"></div>

                                        ```js
                                        ::part( `<ident>+` )
                                        ```

                                        이 페이지에 다음과 같은 링크가 <ident> 주위에 있습니다.

                                        ![Screenshot from the aforementioned page that shows the definition of <ident>](https://res.cloudinary.com/practicaldev/image/fetch/s--IbCY8TyL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pcer0v4q85hp3g789f1.png)

                                        지금까지 MDN은 유효한 식별이 무엇인지, 따라서 유효한 CSS 부품 이름이 무엇인지에 대해 인간이 읽을 수 있는 가장 쉬운 설명을 제공했다. 유효한 문자의 개요는 다음과 같습니다.

                                        - A-Z, A-Z
                                        - 0-9
                                        - 하이픈
                                        - 밑줄을 치다
                                        - 탈주자
                                        - 16진수 형식의 유니코드 문자

                                        <div class="content-ad"></div>

                                        이것이 왜 나의 구두점 예시들이 효과가 없었는지 설명해준다. 하지만 흥미로운 점은 다음과 같다.

                                        그럼 아무 캐릭터나 쓸 수 있는 건가요? 구두점이 있지만 효과가 없었던 부분 중 하나를 다시 시도해 보겠습니다.

                                        ```js
                                        <div part="a.b">
                                        ```

                                        이제 CSS로 타겟을 정합시다.

                                        ```js
                                        ::part(a\.b) {
                                          ...
                                          }
                                          ```

                                          <div class="content-ad"></div>

                                          됐다! 그래서 어떤 캐릭터라도 사용할 수 있다는 점에서 스펙은 기술적으로 정확하지만, 그들 중 일부는 탈출해야 한다는 점에서 명확하지 않다.

                                          다음 내용을 확인하십시오.

                                          ```js
                                          <div part="a.b{c}|d">
                                          ```

                                          그리고 CSS:

                                          ```js
                                          ::part(a\.b\{c\}\|d) {
                                            ...
                                            }
                                            ```

                                            <div class="content-ad"></div>

                                            이것도 돼요.

                                            ## 부품을 사용하여 대상 상태 사용

                                            지금까지는 노출시키고 싶은 요소마다 한 개의 부품을 사용했습니다. 그러나 사양에 따라 부품은 클래스와 더 유사하게 사용해야 합니다.

                                            부품 사용 방식을 바꿔야 할 것 같아요. 나는 그들을 식별자로 생각하곤 했지만, 스펙이 시사하는 것처럼 그들을 수업에 더 가깝게 생각하는 것이 공백을 메우는데 도움이 될 수 있다!

                                            밑줄이 유효하다는 것을 알았으므로, ::state 선택기를 사용하지 않았으므로 호버/포커스/활성 상태에 대한 규약으로 밑줄을 탐색할 수 있습니다. 예를 들어, 부품에 합성 초점 상태를 제공하거나 구성요소의 다른 요소에 자연스러운 초점 상태를 "호이스트"할 수 있습니다.

                                            <div class="content-ad"></div>

                                            ```js
                                            <div part="control control_focus">
                                            ```

                                            이 규칙에서는, 우리는 결국 ::상태 선택기가 필요하지 않을 것이다!

                                            ## 할 수 있다고 해서 꼭 해야 하는 것은 아닙니다.

                                            자, 이제 됐군 CSS 부품에 원하는 이름을 지정할 수 있습니다. 특수 문자를 이스케이프해야 합니다! 앞의 예제를 사용하여, 우리는 심지어 모든 글자를 제거하고 기호로만 부품 이름을 만들 수 있습니다!

                                            ```js
                                            <div part=".{}|">
                                            ```

                                            <div class="content-ad"></div>

                                            근데 셀렉터가 좀 난리가 났어.

                                            ```js
                                            ::part(\.\{\}\|) {
                                              /*  */
                                              }
                                              ```

                                              현대의 모든 브라우저에서 테스트해봤더니 계속 작동하는 것 같습니다. 물론, 이것은 그다지 실용적이지 않습니다. 당신의 사용자들을 존중하기 위해, 나는 당신의 CSS 부품에 이렇게 이름을 붙이지 않는 것을 조언합니다! 

                                              나는 여기서 특별한 캐릭터가 유용한지 아닌지 혼란스러워. 아마도 내부 패턴 때문일 수도 있지만, 공개 API의 일부로 노출되지는 않을 것 같습니다. 사용자들은 확실히 스타일시트에서 그 캐릭터들을 탈출시키는 것을 잊어버릴 것이다. 제 파트는 아마 계속 a-z를 사용하고 대시를 대부분 사용할 거예요.

                                              이 게시물은 원래 작가의 블로그에 게재되었습니다.

                                              <div class="content-ad"></div>