diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 6fd601c6b6..51067279ac 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -201,16 +201,30 @@ export default function dom ( parsed, source, options, names ) { getUniqueName: generator.getUniqueNameMaker() }); - parsed.html.children.forEach( node => generator.visit( node ) ); - - generator.addRenderer( generator.pop() ); - const builders = { main: new CodeBuilder(), init: new CodeBuilder(), _set: new CodeBuilder() }; + if ( parsed.css && options.css !== false ) { + generator.current.builders.mount.addLine( `if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument );` ); + + builders.main.addBlock( deindent` + function addCss ( document ) { + var style = ${generator.helper( 'createElement' )}( 'style' ); + style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )}; + ${generator.helper( 'appendNode' )}( style, document.head ); + + document.__sveltecss_${parsed.hash} = true; + } + ` ); + } + + parsed.html.children.forEach( node => generator.visit( node ) ); + + generator.addRenderer( generator.pop() ); + if ( options.dev ) { builders._set.addBlock ( deindent` if ( typeof newState !== 'object' ) { @@ -253,28 +267,11 @@ export default function dom ( parsed, source, options, names ) { builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` ); } - if ( parsed.css && options.css !== false ) { - builders.main.addBlock( deindent` - var addedCss = false; - function addCss () { - var style = ${generator.helper( 'createElement' )}( 'style' ); - style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )}; - ${generator.helper( 'appendNode' )}( style, document.head ); - - addedCss = true; - } - ` ); - } - let i = generator.renderers.length; while ( i-- ) builders.main.addBlock( generator.renderers[i] ); builders.init.addLine( `this._torndown = false;` ); - if ( parsed.css && options.css !== false ) { - builders.init.addLine( `if ( !addedCss ) addCss();` ); - } - if ( generator.hasComponents ) { builders.init.addLine( `this._renderHooks = [];` ); } diff --git a/test/generator/render-in-iframe/_config.js b/test/generator/render-in-iframe/_config.js new file mode 100644 index 0000000000..190a2b57de --- /dev/null +++ b/test/generator/render-in-iframe/_config.js @@ -0,0 +1,21 @@ +export default { + test ( assert, component, target, window ) { + const iframe = window.document.createElement('iframe'); + window.document.body.appendChild(iframe); + + const otherTarget = iframe.contentWindow.document.body; + + new component.constructor({ + target: otherTarget + }); + + assert.equal( + window.getComputedStyle(target.querySelector('h1')).color, + 'rgb(255, 0, 0)' + ); + assert.equal( + window.getComputedStyle(otherTarget.querySelector('h1')).color, + 'rgb(255, 0, 0)' + ); + } +}; diff --git a/test/generator/render-in-iframe/main.html b/test/generator/render-in-iframe/main.html new file mode 100644 index 0000000000..c67978fa51 --- /dev/null +++ b/test/generator/render-in-iframe/main.html @@ -0,0 +1,6 @@ +

Just some static HTML

+