label <style> element with id instead of with attribute, for performance

src/generators/dom/index.js

@@ -119,7 +119,7 @@ export default function dom ( parsed, source, options ) {
 		builders.main.addBlock( deindent`
 			function ${generator.alias( 'add_css' )} () {
 				var style = ${generator.helper( 'createElement' )}( 'style' );
-				${generator.helper( 'setAttribute' )}( style, ${JSON.stringify( generator.cssId )}, '' );
+				style.id = ${JSON.stringify( generator.cssId + '-style' )};
 				style.textContent = ${JSON.stringify( generator.css )};
 				${generator.helper( 'appendNode' )}( style, document.head );
 			}
@@ -133,7 +133,7 @@ export default function dom ( parsed, source, options ) {
 	builders.init.addLine( `this._torndown = false;` );
 
 	if ( parsed.css && options.css !== false ) {
-		builders.init.addLine( `if ( !document.querySelector( 'style[${generator.cssId}]' ) ) ${generator.alias( 'add_css' )}();` );
+		builders.init.addLine( `if ( !document.getElementById( ${JSON.stringify( generator.cssId + '-style' )} ) ) ${generator.alias( 'add_css' )}();` );
 	}
 
 	if ( generator.hasComponents || generator.hasIntroTransitions ) {

test/js/samples/collapses-text-around-comments/expected.js

@@ -10,7 +10,7 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	setAttribute( style, "svelte-3842350206", '' );
+	style.id = "svelte-3842350206-style";
 	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
 }
@@ -57,7 +57,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.querySelector( 'style[svelte-3842350206]' ) ) add_css();
+	if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 	if ( options.target ) this._fragment.mount( options.target, null );