Can you pass callbacks through a shadow-DOM boundary (and is the global scope shared)?

Question

We have a component dynamically mounted inside a shadow DOM which communicates by the main DOM via events.

Can callbacks be sent via events?

Can the script inside the shadow DOM do undesirable things like pollute the global js namespace of the main DOM, taking into account callbacks?

(I believe the answers are "probably" and "probably not" respectively, but this is currently something of a debate. I'll update this question with the answers we find if we get there before anyone else, although it might be a while before we can find the resource and I feel like this would be a useful question for future explorers since my googling has failed).

Answer 1

My answers would be:

• Yes , you can send any JS (callback/function reference) you want in evt.detail. (see event.detail.callback )
• Yes , there is one Global Scope every Web Component can access. (see GlobalVariable

 <my-element id=ONE><button>Click One</button></my-element> <my-element id=TWO><button>Click Two</button></my-element> <script> let GlobalVariable = 0; window.customElements.define('my-element', class extends HTMLElement { constructor() { super().attachShadow({mode:'open'}).innerHTML = `<slot></slot>`; let report = (evt) => document.body.append( document.createElement("br"), GlobalVariable++, " - ", `${this.id} received: ${evt.type} - detail: ${JSON.stringify(evt.detail)} `, evt.detail.callback && evt.detail.callback(this.id) // not for 'click' event ); window.addEventListener('greet', report); // Custom Event window.addEventListener('click', report); // button click this.onclick = () => window.dispatchEvent(new CustomEvent('greet', { bubbles: true, composed: true, detail: { fromid: this.id, callback: this.callback.bind(this) } })); } callback(payload){ return `${this.id} executed callback function(${payload})`; } }); </script>