diff --git a/src/js/resources/create-html.js b/src/js/resources/create-html.js index c5732d335..9b22976d1 100644 --- a/src/js/resources/create-html.js +++ b/src/js/resources/create-html.js @@ -21,6 +21,7 @@ */ import { registerScriptlet } from './base.js'; +import { runAt } from './run-at.js'; import { safeSelf } from './safe-self.js'; /******************************************************************************/ @@ -55,6 +56,7 @@ function trustedCreateHTML( if ( htmlStr === '' ) { return; } const safe = safeSelf(); const logPrefix = safe.makeLogPrefix('trusted-create-html', parentSelector, htmlStr, durationStr); + const extraArgs = safe.getExtraArgs(Array.from(arguments), 3); // We do not want to recursively create elements self.trustedCreateHTML = true; let ancestor = self.frameElement; @@ -94,17 +96,37 @@ function trustedCreateHTML( setTimeout(remove, duration); return true; }; - if ( append() ) { return; } - const observer = new MutationObserver(( ) => { - if ( append() === false ) { return; } - observer.disconnect(); - }); - observer.observe(document, { childList: true, subtree: true }); + const start = ( ) => { + if ( append() ) { return; } + const observer = new MutationObserver(( ) => { + if ( append() === false ) { return; } + observer.disconnect(); + }); + const observerOptions = { + childList: true, + subtree: true, + }; + if ( /[#.[]/.test(parentSelector) ) { + observerOptions.attributes = true; + if ( parentSelector.includes('[') === false ) { + observerOptions.attributeFilter = []; + if ( parentSelector.includes('#') ) { + observerOptions.attributeFilter.push('id'); + } + if ( parentSelector.includes('.') ) { + observerOptions.attributeFilter.push('class'); + } + } + } + observer.observe(document, observerOptions); + }; + runAt(start, extraArgs.runAt || 'loading'); } registerScriptlet(trustedCreateHTML, { name: 'trusted-create-html.js', requiresTrust: true, dependencies: [ + runAt, safeSelf, ], world: 'ISOLATED',