Skip to content

Instantly share code, notes, and snippets.

@TheoOliveira
Created November 24, 2024 21:04
Show Gist options
  • Select an option

  • Save TheoOliveira/13a10723642819e248e8faf4655f38f3 to your computer and use it in GitHub Desktop.

Select an option

Save TheoOliveira/13a10723642819e248e8faf4655f38f3 to your computer and use it in GitHub Desktop.
Force Open shadowDom
function overrideShadowDOM() {
// Store original attachShadow method
Element.prototype._attachShadow = Element.prototype.attachShadow;
// Override attachShadow to always use open mode
Element.prototype.attachShadow = function() {
console.log('Shadow DOM attachment intercepted - forcing open mode');
return this._attachShadow({ mode: 'open' });
};
// Function to handle existing shadow roots
function handleExistingShadowRoots() {
document.querySelectorAll('*').forEach(element => {
if (element.shadowRoot && element.shadowRoot.mode === 'closed') {
console.log('Found closed shadow root - reopening');
const openRoot = element._attachShadow({ mode: 'open' });
// Copy content from closed root if possible
Array.from(element.shadowRoot.children).forEach(child => {
openRoot.appendChild(child.cloneNode(true));
});
}
});
}
// Function to set up the observer
function setupObserver() {
if (!document.documentElement) {
console.log('Document not ready, retrying in 100ms...');
setTimeout(setupObserver, 100);
return;
}
console.log('Setting up MutationObserver');
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node instanceof Element) {
if (node.shadowRoot && node.shadowRoot.mode === 'closed') {
console.log('New closed shadow root detected - reopening');
node._attachShadow({ mode: 'open' });
}
}
});
});
});
try {
observer.observe(document.documentElement, {
childList: true,
subtree: true
});
console.log('MutationObserver successfully attached');
} catch (error) {
console.error('Error setting up MutationObserver:', error);
}
}
// Initial handling of existing shadow roots
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
handleExistingShadowRoots();
setupObserver();
});
} else {
handleExistingShadowRoots();
setupObserver();
}
console.log('Shadow DOM override complete');
}
// Execute immediately
overrideShadowDOM();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment