>

업데이트: https://github.com/Polymer/ 폴리머/문제/5551 -shadyDom을 사용합니다

YouTube 팀은 최근에 코드를 Polymer 3.x로 업데이트했습니다

YouTube로 이동하여 개발 도구를 열면 그림자 돔이 전혀 표시되지 않습니다 :

그러나 새 Polymer 3 앱을 시작하면 이전 버전과 마찬가지로 shadow dom이 있습니다.

그림자 돔없이 특정 구성 요소를 렌더링 할 수있는 방법에 대한 토론이 많이 있습니다. YouTube 팀이 성공한 것 같습니다.

Shadow dom is great for component development, but pages, for instance, should not be treated as components, IMHO. Treating everything as a component (with ShadowDom) turns out to a be pain - issues with styling, third party libs and more.

내 질문은 : YouTube 팀이 어떻게 이것을 달성 했습니까?


  • 답변 # 1

    아마도 이것을 사용하고있을 것입니다 :

    폴리머 참조

    강조 광산 :

    와이즈 비즈

    litelement의 스타일에 대해 이제 다음을 수행 할 수 있습니다.

    Customize DOM initialization

    There are several points where you can customize how Polymer initializes your element's DOM. You can customize how the shadow root is created by creating it yourself. And you can override the _attachDom method to change how the the DOM tree is added to your element: for example,to stamp into light DOMinstead of shadow DOM.

    Stamp templates in light DOM

    You can customize how the DOM is stamped by overriding the _attachDom method. The method takes a single argument, a DocumentFragment containing the DOM to be stamped. If you want to stamp the template into light DOM, simply add an override like this:

    _attachDom(dom) { this.appendChild(dom); } When you stamp the DOM template to light DOM like this, data bindings and declarative event listeners work as usual, but you cannot use shadow DOM features, like and style encapsulation.

    A template stamped into light DOM shouldn't contain any tags. Styles can be applied by an enclosing host element, or at the document level if the element isn't used inside another element's shadow DOM.

    이 기능은 여러 모듈에서 공유 될 수 있으며 "CSS"를 반환하는 다른 기능과도 호환됩니다.

    static get styles() { return css` :host { display: block; height: 100%; } .boxing rect { x: -24; y: -14; width: 48px; height: 28px; rx: 8; ry: 8; } .copia rect.text { width: 135px; height: 30px; stroke:blue; stroke-width: 1px; } text { font-size: 20px; font-family: Arial; } ${miGestorEstilos.getDibujaGafa()} ${miGestorEstilos.getDibujaForma()} ` }

  • 이전 python - 클래스 상수에서 classmethod 호출
  • 다음 java - IntelliJ에서 명령 줄 인수를 묻는 메시지를 표시하는 방법