Firefox에서 폴리머 코어 서브 메뉴 스타일링?

Question

이것은 내가 언급 한 것보다 더 일반적인 목적의 질문 일 수 있지만 가능하면 구체적으로 표현하고자했습니다. jsFiddle을 Polymer와 함께 사용하는 방법을 모르겠다.하지만 모든 코드 샘플로 충분할 것으로 기대된다.

<core-menu> 
    <core-submenu label="First submenu"> 
    <core-item label="Test submenu item 1"> 
    <core-item label="Test submenu item 2"> 
    <core-item label="Test submenu item 3"> 
    <core-item label="Test submenu item 4"> 
    </core-submenu> 
    <core-submenu label="Second submenu"> 
    </core-submenu> 
</core-menu> 

난 할 노력하고있어하면 core-submenu 자체에서 다른 하위 메뉴에 core-item들 스타일 :

나는 다음과 같다 핵심 메뉴가 있습니다. core-submenu core-item 선택기는 Chrome에서 작동하지만 Firefox에서는 "첫 번째 하위 메뉴"및 "두 번째 하위 메뉴"라는 텍스트도 선택됩니다.

나는 파이어 폭스 개발 도구로보고, 및 폴리머 DOM 트리의 이런 종류의 만드는 것 같습니다 :

<core-menu> 
    <core-submenu> 
    <core-item><div id="label">First submenu</div></core-item> 
     <core-menu id="submenu"> 
     <core-item>Test submenu item 1</core-item> 
     ... 

그래서, 내가 작동 #submenu core-item을 시도,하지만 지금은 정반대의 문제가있다! polyfill이 태그에 submenu ID를 추가하지 않아 Chrome에서 항목을 찾지 못했습니다. 한 시간 동안 두 브라우저에서 작동 할 선택기 (또는 선택기 집합)를 찾으려고 노력했습니다. 어떤 도움이 필요합니까?

Answer 1

정말 못 생겼기 때문에 이것이 유일한 대답이 아니길 바란다.하지만이 선택자는 효과가 있었다. 반면,

크롬 파이어 폭스

<core-menu> 
    <core-submenu> 
    <core-item>Submenu 1</core-item> 
    <core-menu> 
     <core-submenu> 
     <core-item>Item 1</core-item> 
     ... 

그래서 :not(:only-of-type) 그림자 DOM 내부의 크롬 버전의 핵심 항목을 제외

<core-menu> 
    <core-submenu> 
    #shadow-root 
     <core-item>Submenu 1</core-item> 
    <core-item>Item 1</core-item> 
    ... 

: 여기

core-submenu core-item:not(:only-of-type), #submenu core-item 

는 일 이유 #submenu core-item은 모두 찾음 (심지어 단일 항목 부 메뉴) t 그는 파이어 폭스의 핵심 메뉴 인 하위 메뉴를 제공합니다.

이 솔루션으로 기술적 부채를 몇 파운드 쌓으므로 나와 똑똑한 사람이 더 나은 해결책을 찾길 바랍니다! 이제 응용 프로그램의 나머지 스타일 선택기를 우연히 우물쭈물하는 ...