attachShadow 이벤트 감지

Question

호스트 요소에 그림자를 첨부하는 이벤트를 감지하고 싶습니다.

유스 케이스 : MutationObserver을 사용하여 변경된 내용을 바인딩 (묶기) 프레임 워크의 로직의 일부로 처리하고 후 처리합니다.

왜이 이벤트를 감지해야합니까? shadowDOM 내에서 변경 사항을 볼 수 있으려면 다른 MutationObserver을 생성하여 shadowRoot에 설정해야합니다.이 작업은 정상적으로 작동하므로 새로 생성 된 그림자를 감지하는 것이 유일한 문제입니다.

물론, MutationObserver은 attachShadow 동작을 감지하지 못하므로 모든 옵션 플래그를 true로 설정하여 시도해 보았습니다.

참고 : 나는 this question on this forum을 알고 있지만 아직 정확히 같은 문제는 아닙니다. IMHO.

UPDATE :

나는이 질문에 대한 답으로 @Supersharp의 답을 표시하고있어, 네이티브 attachShadow 방법은 현재이 작업을 관찰 할 수있는 유일한 방법입니다을 proxifying 같은 외모 때문이다.

하지만, 마찬가지로 우리도이 경우, appendChild, removeChild, innerHTML/textContent 등을 proxifying하지만, 잘 정의 된 MutationObserver API를에 중계되지 않는다는 사실에, 잠재적으로 파괴하지 않고 동일한을 달성 할 수있는 방법이 있어야합니다 네이티브 API의 행동이나 등 내가 MutationObserverhere으로 attachShadow을 지원하기위한 제안을 발행 한

(? 이미 재정이 아마 너무 제거가있을 것입니다) 잡기 그림자를 연결하는 다른 가능한 미래의 길을 plumbering .

Answer 1

HTMLElement 프로토 타입에 정의 된 네이티브 attachShadow() 메서드를 오버로드 할 수 있습니다.

그런 다음 새 함수 안에 그림자 루트에 MutationObserver를 추가하십시오.

Answer 2

이

var attachShadow = HTMLElement.prototype.attachShadow 
 

 
HTMLElement.prototype.attachShadow = function (option) 
 
{ 
 
    var sh = attachShadow.call(this, option) 
 
    console.info('%s shadow attached to %s', option.mode, this) 
 
    //add a MutationObserver here 
 
    return sh 
 
} 
 

 
target.attachShadow({ mode: 'open' }) 
 
    .innerHTML = 'Hello'

<div id=target></div>

는 클래스

const Mixin = base => class extends base { 
 
    constructor() { 
 
    super(); 
 
    } 
 
    
 
    attachShadow(options) { 
 
    super.attachShadow(options); 
 
    console.log('shadowRoot created'); 
 
    } 
 
} 
 

 
class SomeElement extends Mixin(HTMLElement) { 
 
    constructor() { 
 
    super(); 
 
    } 
 
    
 
    connectedCallback() { 
 
    this.attachShadow({mode: 'open'}); 
 
    this.shadowRoot.innerHTML = '<slot></slot>'; 
 
    } 
 
} 
 
customElements.define('some-element', SomeElement)

<some-element><h1>shadow</h1></some-element>