I'd like to detect an event of attaching shadow to the host element.

Use-case: using MutationObserver to watch any DOM changes and post-process the changed content as part of binding (tying) framework's logic.

Why do I need to detect this event? In order to be able to watch for a changes within the shadowDOM, another MutationObserver should be created and set on the shadowRoot - this works just fine, so the only issue is with detecting newly created shadows.

Needless to say, that plainly MutationObserver does not detect attachShadow action, tried that with all of the options flags set to true.

Note: I'm aware of this question on this forum, yet it's not exactly the same problem, IMHO.

UPDATE:

I'm marking the answer of @Supersharp as the answer to the question, since looks like proxifying the native attachShadow method is currently the only way to observe this action.

Yet, similarly to the fact that we are not proxifying appendChild, removeChild, innerHTML/textContent and others, but relaying on well defined MutationObserver APIs, in this case too, there must be a way to achieve the same without potentially breaking native API behavior or catching up and plumbering any other possible future way to attach shadow (and probably there will be removal too?, already there is an override) etc.

I've issued a proposal to support attachShadow by MutationObserver here.

I'd like to detect an event of attaching shadow to the host element.

Use-case: using MutationObserver to watch any DOM changes and post-process the changed content as part of binding (tying) framework's logic.

Why do I need to detect this event? In order to be able to watch for a changes within the shadowDOM, another MutationObserver should be created and set on the shadowRoot - this works just fine, so the only issue is with detecting newly created shadows.

Needless to say, that plainly MutationObserver does not detect attachShadow action, tried that with all of the options flags set to true.

Note: I'm aware of this question on this forum, yet it's not exactly the same problem, IMHO.

UPDATE:

I'm marking the answer of @Supersharp as the answer to the question, since looks like proxifying the native attachShadow method is currently the only way to observe this action.

Yet, similarly to the fact that we are not proxifying appendChild, removeChild, innerHTML/textContent and others, but relaying on well defined MutationObserver APIs, in this case too, there must be a way to achieve the same without potentially breaking native API behavior or catching up and plumbering any other possible future way to attach shadow (and probably there will be removal too?, already there is an override) etc.

I've issued a proposal to support attachShadow by MutationObserver here.

• javascript
• events
• dom
• shadow-dom
• mutation-observers

3 Answers 3

You could override the native attachShadow() method defined in the HTMLElement prototype.

Then, inside the new function, add a MutationObserver to the shadow root.

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>

This is how I do it when using classes

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>

const target = document.querySelector('html-element'); //element to which shadowroot is attached const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationList, observer){
//do something };
const observer = new MutationObserver(callback);
observer.observe(target,config);