javascript - Detect attachShadow event - Stack Overflow

admin管理员组

文章数量:1308553

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

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Apr 4, 2017 at 20:33 GullerYAGullerYA 1,7761818 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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);

本文标签： javascriptDetect attachShadow eventStack Overflow