고분자 사용자 정의 속성이 폴리머 목록 항목에 대한 문서는 다음과 같은 사용자 지정 속성을 지정

Question

를 작동시킬 방법 :

을---paper 항목에 초점을 맞춘-전에 믹스 인가에 적용 : 집중 용지 항목 {}

전

{}에 기본값이 없거나 "알려주지 않음"을 의미하는지 확실하지 않습니다. 선택한 항목의 # shadow-root 스타일에서 다음을 찾은 이유는 다음과 같습니다.

:host(:focus):before, .paper-item:focus:before { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 

    background: currentColor; 
    content: ''; 
    opacity: 0.12; 
    pointer-events: none;; 
} 

및 this in paper-item-shared-style.html

 :host(:focus):before, .paper-item:focus:before { 
    @apply(--layout-fit); 

    background: currentColor; 
    content: ''; 
    opacity: var(--dark-divider-opacity); 
    pointer-events: none; 

    @apply(--paper-item-focused-before); 
    } 

그래서 --paper-item-focused-before에 대한 내용이 정의되어있는 것 같습니다. 어쨌든, currentColor를 inspector에서 원하는 색상으로 바꾸면, 원하는 색상으로 처리됩니다. 필자는 영구적 인 방법으로 --paper-item-focused-before를 정의하는 것을 변경하는 것으로 가정합니다. 나는 이것을 index.html에있는 CSS에 추가했다 :

<style is="custom-style"> 
    :host { 
    --paper-item-focused-before: { 
     background-color: #293040 
    } 
    } 
... 
</style> 

그것은 작동하지 않는다. 다른 선택기를 사용해야하거나 다른 위치에 배치해야합니까?

Answer 1

@ a1626의 답변은 무엇입니까? 내가 실제로 시도했다 : 전에 루트,하지만 구성 요소에 의해 지정된 CSS를했다. 내가 index.html을에 스타일에 넣을 때 작동합니다

<style is="custom-style"> 
    :root { 
    --paper-item-focused-before: { 
     background-color: #293040 
    } 
} 
... 
</style> 

나는 # 그림자 루트에 관리자에 무엇을 가지고이

:host(:focus):before, .paper-item:focus:before { 
    position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 

    background: currentColor; 
    content: ''; 
    opacity: 0.12; 
    pointer-events: none;background-color: #293040; 
} 

이 --paper- a1626 대답 @ 지원 item-focused-before는 비어 있습니다. @ a1626, 당신이 질문에 대답하기로 결정했다면, 나는 그것을 받아 들일 것입니다.