diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index c08123b8c3..25da49d72a 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -45,13 +45,7 @@ export default function dom( if (should_add_css) { body.push(b` function ${add_css}(customStyleTag) { - const styleId = "${component.stylesheet.id}-style" - const appendTo = customStyleTag || @_document.head - if (appendTo.querySelector(styleId)) return - var style = @element("style"); - style.id = styleId; - style.textContent = "${styles}"; - @append(appendTo, style); + @appendStyleIfNotPresent(customStyleTag || @_document.head, "${component.stylesheet.id}-style", "${styles}"); } `); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index ad06d6ff08..76226ab852 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,5 +1,14 @@ import { has_prop } from './utils'; +export function appendStyleIfNotPresent(target: Element, styleId: string, styles: string) { + if (!target.querySelector('#' + styleId)) { + const style = element('style'); + style.id = styleId; + style.textContent = styles; + append(target, style); + } +} + export function append(target: Node, node: Node) { target.appendChild(node); } @@ -63,7 +72,7 @@ export function listen(node: EventTarget, event: string, handler: EventListenerO } export function prevent_default(fn) { - return function(event) { + return function (event) { event.preventDefault(); // @ts-ignore return fn.call(this, event); @@ -71,7 +80,7 @@ export function prevent_default(fn) { } export function stop_propagation(fn) { - return function(event) { + return function (event) { event.stopPropagation(); // @ts-ignore return fn.call(this, event); @@ -79,7 +88,7 @@ export function stop_propagation(fn) { } export function self(fn) { - return function(event) { + return function (event) { // @ts-ignore if (event.target === this) fn.call(this, event); }; @@ -308,7 +317,7 @@ export function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } -export function custom_event(type: string, detail?: T) { +export function custom_event(type: string, detail?: T) { const e: CustomEvent = document.createEvent('CustomEvent'); e.initCustomEvent(type, false, false, detail); return e;