섀도우 dom 스크립트를 사용하여 호스트의 변경 사항을 살펴 봅니다.

Question

그림자 dom을 활용하는 요소 모음을 관리해야하는 앱을 만들고 있습니다. 템플릿 태그는 내용을 캡슐화하기 때문에 스타일에 따라 스크립트를 유지하고 이벤트에 대한 조치를 취할 수 있습니다. shadowRoot 내부의 스크립트가 호스트 속성 변경을 관찰 할 수 있는지 알고 싶습니다.

내 제안 된 경로는 데이터 속성을 호스트에 첨부하고 섀도우 스크립트가 변경 내용을 수신 한 다음 shadowRoot 내부의 요소를 업데이트하는 것입니다. shadowRoot의 요소에 액세스하고 자바 스크립트를 사용하여 자바 스크립트를 사용하여 모듈을 변경할 수 있다는 것을 알고 있지만 모듈화 및 재사용을 실험 해보고자합니다. 궁극적으로이 구성 요소를 재사용 할 수 있고 호스트 속성의 변경에 대응하고 싶습니다.

Answer 1

해결책을 찾았고 공유 할 것으로 생각했습니다. 아직 모든 브라우저와 호환되지는 않을 지 모르지만 그럴 가능성은 있습니다.

제 스크립트에는 내 사용자 정의 html 태그를 처리하는 iffe/monad가있어 템플릿으로 그림자 뿌리와 내용을 내용으로 만듭니다. 모나드에 대한 인수 중 하나는 내 맞춤 태그와 일치하는 노드 배열입니다. 이들을 반복하면서, 클로저에서 생성 된 섀도우 루트를 사용하기 위해 특정 속성 변경을 감시하는 MutationObserver를 만듭니다.

  (function (tags, template) { 
      Array.prototype.forEach.call(hexagons, function (v, k) { 
        var shadow = v.createShadowRoot(); 
        shadow.appendChild(template.content.cloneNode(true)); 

        /* mutation observer */ 
        var observer = new MutationObserver(function (mutations) { 
          mutations.forEach(function (mutation) { 
           shadow.querySelector('.seconds') 
            .innerText(
             mutation.target.getAttribute(mutation.attributeName) 
            ) 
          }); 
         }); 
        observer.observe(v, { attributes: true, attributeFilter: ['bgcolor'] }); 
       } 
      ); 
     }(document.querySelectorAll('time'), document.querySelector('template#time'))); 

위의 내용은 Chrome 및 Firefox 최신 버전에서 작동합니다. 나는 mroe 브라우저 친화적 인 솔루션을 계속 찾고있을 것입니다.