diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.js b/src/compiler/compile/render_dom/wrappers/Element/index.js
index ac987219a0..e6cb10e501 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.js
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.js
@@ -9,7 +9,15 @@ import { namespaces } from '../../../../utils/namespaces.js';
 import AttributeWrapper from './Attribute.js';
 import StyleAttributeWrapper from './StyleAttribute.js';
 import SpreadAttributeWrapper from './SpreadAttribute.js';
-import { regex_dimensions, regex_starts_with_newline, regex_backslashes, regex_border_box_size, regex_content_box_size, regex_device_pixel_content_box_size, regex_content_rect } from '../../../../utils/patterns.js';
+import {
+	regex_dimensions,
+	regex_starts_with_newline,
+	regex_backslashes,
+	regex_border_box_size,
+	regex_content_box_size,
+	regex_device_pixel_content_box_size,
+	regex_content_rect
+} from '../../../../utils/patterns.js';
 import Binding from './Binding.js';
 import add_to_set from '../../../utils/add_to_set.js';
 import { add_event_handler } from '../shared/add_event_handlers.js';
@@ -22,118 +30,126 @@ import Action from '../../../nodes/Action.js';
 import MustacheTagWrapper from '../MustacheTag.js';
 import RawMustacheTagWrapper from '../RawMustacheTag.js';
 import is_dynamic from '../shared/is_dynamic.js';
-import { is_name_contenteditable, has_contenteditable_attr } from '../../../utils/contenteditable.js';
+import {
+	is_name_contenteditable,
+	has_contenteditable_attr
+} from '../../../utils/contenteditable.js';
 import create_debugging_comment from '../shared/create_debugging_comment.js';
 import { push_array } from '../../../../utils/push_array.js';
 import CommentWrapper from '../Comment.js';
 const regex_contains_radio_or_checkbox_or_file = /radio|checkbox|file/;
 const regex_contains_radio_or_checkbox_or_range_or_file = /radio|checkbox|range|file/;
 const events = [
-    {
-        event_names: ['input'],
-        filter: (node, _name) => node.name === 'textarea' ||
-            (node.name === 'input' &&
-                !regex_contains_radio_or_checkbox_or_range_or_file.test(
-
-                /** @type {string} */ (node.get_static_attribute_value('type'))))
-    },
-    {
-        event_names: ['input'],
-        filter: (node, name) => is_name_contenteditable(name) && has_contenteditable_attr(node)
-    },
-    {
-        event_names: ['change'],
-        filter: (node, _name) => node.name === 'select' ||
-            (node.name === 'input' &&
-                regex_contains_radio_or_checkbox_or_file.test(
-
-                /** @type {string} */ (node.get_static_attribute_value('type'))))
-    },
-    {
-        event_names: ['change', 'input'],
-        filter: (node, _name) => node.name === 'input' && node.get_static_attribute_value('type') === 'range'
-    },
-    // resize events
-    {
-        event_names: ['elementresize'],
-        filter: (_node, name) => regex_dimensions.test(name)
-    },
-    {
-        event_names: ['elementresizecontentbox'],
-        filter: (_node, name) => regex_content_rect.test(name) ?? regex_content_box_size.test(name)
-    },
-    {
-        event_names: ['elementresizeborderbox'],
-        filter: (_node, name) => regex_border_box_size.test(name)
-    },
-    {
-        event_names: ['elementresizedevicepixelcontentbox'],
-        filter: (_node, name) => regex_device_pixel_content_box_size.test(name)
-    },
-    // media events
-    {
-        event_names: ['timeupdate'],
-        filter: (node, name) => node.is_media_node() && (name === 'currentTime' || name === 'played' || name === 'ended')
-    },
-    {
-        event_names: ['durationchange'],
-        filter: (node, name) => node.is_media_node() && name === 'duration'
-    },
-    {
-        event_names: ['play', 'pause'],
-        filter: (node, name) => node.is_media_node() && name === 'paused'
-    },
-    {
-        event_names: ['progress'],
-        filter: (node, name) => node.is_media_node() && name === 'buffered'
-    },
-    {
-        event_names: ['loadedmetadata'],
-        filter: (node, name) => node.is_media_node() && (name === 'buffered' || name === 'seekable')
-    },
-    {
-        event_names: ['volumechange'],
-        filter: (node, name) => node.is_media_node() && (name === 'volume' || name === 'muted')
-    },
-    {
-        event_names: ['ratechange'],
-        filter: (node, name) => node.is_media_node() && name === 'playbackRate'
-    },
-    {
-        event_names: ['seeking', 'seeked'],
-        filter: (node, name) => node.is_media_node() && name === 'seeking'
-    },
-    {
-        event_names: ['ended'],
-        filter: (node, name) => node.is_media_node() && name === 'ended'
-    },
-    {
-        event_names: ['resize'],
-        filter: (node, name) => node.is_media_node() && (name === 'videoHeight' || name === 'videoWidth')
-    },
-    {
-        // from https://html.spec.whatwg.org/multipage/media.html#ready-states
-        // and https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
-        event_names: [
-            'loadedmetadata',
-            'loadeddata',
-            'canplay',
-            'canplaythrough',
-            'playing',
-            'waiting',
-            'emptied'
-        ],
-        filter: (node, name) => node.is_media_node() && name === 'readyState'
-    },
-    // details event
-    {
-        event_names: ['toggle'],
-        filter: (node, _name) => node.name === 'details'
-    },
-    {
-        event_names: ['load'],
-        filter: (_, name) => name === 'naturalHeight' || name === 'naturalWidth'
-    }
+	{
+		event_names: ['input'],
+		filter: (node, _name) =>
+			node.name === 'textarea' ||
+			(node.name === 'input' &&
+				!regex_contains_radio_or_checkbox_or_range_or_file.test(
+					/** @type {string} */ (node.get_static_attribute_value('type'))
+				))
+	},
+	{
+		event_names: ['input'],
+		filter: (node, name) => is_name_contenteditable(name) && has_contenteditable_attr(node)
+	},
+	{
+		event_names: ['change'],
+		filter: (node, _name) =>
+			node.name === 'select' ||
+			(node.name === 'input' &&
+				regex_contains_radio_or_checkbox_or_file.test(
+					/** @type {string} */ (node.get_static_attribute_value('type'))
+				))
+	},
+	{
+		event_names: ['change', 'input'],
+		filter: (node, _name) =>
+			node.name === 'input' && node.get_static_attribute_value('type') === 'range'
+	},
+	// resize events
+	{
+		event_names: ['elementresize'],
+		filter: (_node, name) => regex_dimensions.test(name)
+	},
+	{
+		event_names: ['elementresizecontentbox'],
+		filter: (_node, name) => regex_content_rect.test(name) ?? regex_content_box_size.test(name)
+	},
+	{
+		event_names: ['elementresizeborderbox'],
+		filter: (_node, name) => regex_border_box_size.test(name)
+	},
+	{
+		event_names: ['elementresizedevicepixelcontentbox'],
+		filter: (_node, name) => regex_device_pixel_content_box_size.test(name)
+	},
+	// media events
+	{
+		event_names: ['timeupdate'],
+		filter: (node, name) =>
+			node.is_media_node() && (name === 'currentTime' || name === 'played' || name === 'ended')
+	},
+	{
+		event_names: ['durationchange'],
+		filter: (node, name) => node.is_media_node() && name === 'duration'
+	},
+	{
+		event_names: ['play', 'pause'],
+		filter: (node, name) => node.is_media_node() && name === 'paused'
+	},
+	{
+		event_names: ['progress'],
+		filter: (node, name) => node.is_media_node() && name === 'buffered'
+	},
+	{
+		event_names: ['loadedmetadata'],
+		filter: (node, name) => node.is_media_node() && (name === 'buffered' || name === 'seekable')
+	},
+	{
+		event_names: ['volumechange'],
+		filter: (node, name) => node.is_media_node() && (name === 'volume' || name === 'muted')
+	},
+	{
+		event_names: ['ratechange'],
+		filter: (node, name) => node.is_media_node() && name === 'playbackRate'
+	},
+	{
+		event_names: ['seeking', 'seeked'],
+		filter: (node, name) => node.is_media_node() && name === 'seeking'
+	},
+	{
+		event_names: ['ended'],
+		filter: (node, name) => node.is_media_node() && name === 'ended'
+	},
+	{
+		event_names: ['resize'],
+		filter: (node, name) =>
+			node.is_media_node() && (name === 'videoHeight' || name === 'videoWidth')
+	},
+	{
+		// from https://html.spec.whatwg.org/multipage/media.html#ready-states
+		// and https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
+		event_names: [
+			'loadedmetadata',
+			'loadeddata',
+			'canplay',
+			'canplaythrough',
+			'playing',
+			'waiting',
+			'emptied'
+		],
+		filter: (node, name) => node.is_media_node() && name === 'readyState'
+	},
+	// details event
+	{
+		event_names: ['toggle'],
+		filter: (node, _name) => node.name === 'details'
+	},
+	{
+		event_names: ['load'],
+		filter: (_, name) => name === 'naturalHeight' || name === 'naturalWidth'
+	}
 ];
 const CHILD_DYNAMIC_ELEMENT_BLOCK = 'child_dynamic_element';
 const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
@@ -141,220 +157,248 @@ const regex_minus_signs = /-/g;
 
 /** @extends Wrapper */
 export default class ElementWrapper extends Wrapper {
+	/** @type {import('../../../nodes/Element.js').default} */
+	node;
 
-    /** @type {import('../../../nodes/Element.js').default} */
-    node;
-
-    /** @type {import('../Fragment.js').default} */
-    fragment;
+	/** @type {import('../Fragment.js').default} */
+	fragment;
 
-    /** @type {Array<AttributeWrapper | import('./StyleAttribute.js').default | import('./SpreadAttribute.js').default>} */
-    attributes;
+	/** @type {Array<AttributeWrapper | import('./StyleAttribute.js').default | import('./SpreadAttribute.js').default>} */
+	attributes;
 
-    /** @type {import('./Binding.js').default[]} */
-    bindings;
+	/** @type {import('./Binding.js').default[]} */
+	bindings;
 
-    /** @type {import('./EventHandler.js').default[]} */
-    event_handlers;
+	/** @type {import('./EventHandler.js').default[]} */
+	event_handlers;
 
-    /** @type {string[]} */
-    class_dependencies;
+	/** @type {string[]} */
+	class_dependencies;
 
-    /** @type {Set<string>} */
-    dynamic_style_dependencies;
+	/** @type {Set<string>} */
+	dynamic_style_dependencies;
 
-    /** @type {boolean} */
-    has_dynamic_attribute;
+	/** @type {boolean} */
+	has_dynamic_attribute;
 
-    /** @type {Set<string>} */
-    select_binding_dependencies;
+	/** @type {Set<string>} */
+	select_binding_dependencies;
 
-    /** @type {boolean} */
-    has_dynamic_value;
+	/** @type {boolean} */
+	has_dynamic_value;
 
-    /** @type {any} */
-    dynamic_value_condition;
+	/** @type {any} */
+	dynamic_value_condition;
 
-    /** @type {any} */
-    var;
+	/** @type {any} */
+	var;
 
-    /** @type {boolean} */
-    void;
+	/** @type {boolean} */
+	void;
 
-    /** @type {import('../../Block.js').default} */
-    child_dynamic_element_block = null;
+	/** @type {import('../../Block.js').default} */
+	child_dynamic_element_block = null;
 
-    /** @type {ElementWrapper} */
-    child_dynamic_element = null;
-    /** */
-    element_data_name = null;
+	/** @type {ElementWrapper} */
+	child_dynamic_element = null;
+	/** */
+	element_data_name = null;
 
- /**
-  * @param {import('../../Renderer.js').default} renderer
-     * @param {import('../../Block.js').default} block
-     * @param {import('../shared/Wrapper.js').default} parent
-     * @param {import('../../../nodes/Element.js').default} node
-     * @param {boolean} strip_whitespace
-     * @param {import('../shared/Wrapper.js').default} next_sibling
-     */
-    constructor(renderer, block, parent, node, strip_whitespace, next_sibling) {
-        super(renderer, block, parent, node);
-        this.var = {
-            type: 'Identifier',
-            name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
-        };
-        this.void = is_void(node.name);
-        this.class_dependencies = [];
-        if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
-            this.child_dynamic_element_block = block.child({
-                comment: create_debugging_comment(node, renderer.component),
-                name: renderer.component.get_unique_name('create_dynamic_element'),
-                type: CHILD_DYNAMIC_ELEMENT_BLOCK
-            });
-            renderer.blocks.push(this.child_dynamic_element_block);
-            this.child_dynamic_element = new ElementWrapper(renderer, this.child_dynamic_element_block, parent, node, strip_whitespace, next_sibling);
-            // the original svelte:element is never used for rendering, because
-            // it gets assigned a child_dynamic_element which is used in all rendering logic.
-            // so doing all of this on the original svelte:element will just cause double
-            // code, because it will be done again on the child_dynamic_element.
-            return;
-        }
-        this.dynamic_style_dependencies = new Set();
-        if (this.node.children.length) {
-            this.node.lets.forEach((l) => {
-                extract_names(l.value || l.name).forEach((name) => {
-                    renderer.add_to_context(name, true);
-                });
-            });
-        }
-        this.attributes = this.node.attributes.map((attribute) => {
-            if (attribute.name === 'style') {
-                return new StyleAttributeWrapper(this, block, attribute);
-            }
-            if (attribute.type === 'Spread') {
-                return new SpreadAttributeWrapper(this, block, attribute);
-            }
-            return new AttributeWrapper(this, block, attribute);
-        });
-        this.has_dynamic_attribute = !!this.attributes.find((attr) => attr.node.get_dependencies().length > 0);
-        // ordinarily, there'll only be one... but we need to handle
-        // the rare case where an element can have multiple bindings,
-        // e.g. <audio bind:paused bind:currentTime>
-        this.bindings = this.node.bindings.map((binding) => new Binding(block, binding, this));
-        this.event_handlers = this.node.handlers.map((event_handler) => new EventHandler(event_handler, this));
-        if (node.intro || node.outro) {
-            if (node.intro)
-                block.add_intro(node.intro.is_local);
-            if (node.outro)
-                block.add_outro(node.outro.is_local);
-        }
-        if (node.animation) {
-            block.add_animation();
-        }
-        block.add_dependencies(node.tag_expr.dependencies);
-        // add directive and handler dependencies
-        [node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach((directive) => {
-            if (directive && directive.expression) {
-                block.add_dependencies(directive.expression.dependencies);
-            }
-        });
-        node.handlers.forEach((handler) => {
-            if (handler.expression) {
-                block.add_dependencies(handler.expression.dependencies);
-            }
-        });
-        this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
-        this.element_data_name = block.get_unique_name(`${this.var.name}_data`);
-    }
+	/**
+	 * @param {import('../../Renderer.js').default} renderer
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('../shared/Wrapper.js').default} parent
+	 * @param {import('../../../nodes/Element.js').default} node
+	 * @param {boolean} strip_whitespace
+	 * @param {import('../shared/Wrapper.js').default} next_sibling
+	 */
+	constructor(renderer, block, parent, node, strip_whitespace, next_sibling) {
+		super(renderer, block, parent, node);
+		this.var = {
+			type: 'Identifier',
+			name: node.name.replace(regex_invalid_variable_identifier_characters, '_')
+		};
+		this.void = is_void(node.name);
+		this.class_dependencies = [];
+		if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
+			this.child_dynamic_element_block = block.child({
+				comment: create_debugging_comment(node, renderer.component),
+				name: renderer.component.get_unique_name('create_dynamic_element'),
+				type: CHILD_DYNAMIC_ELEMENT_BLOCK
+			});
+			renderer.blocks.push(this.child_dynamic_element_block);
+			this.child_dynamic_element = new ElementWrapper(
+				renderer,
+				this.child_dynamic_element_block,
+				parent,
+				node,
+				strip_whitespace,
+				next_sibling
+			);
+			// the original svelte:element is never used for rendering, because
+			// it gets assigned a child_dynamic_element which is used in all rendering logic.
+			// so doing all of this on the original svelte:element will just cause double
+			// code, because it will be done again on the child_dynamic_element.
+			return;
+		}
+		this.dynamic_style_dependencies = new Set();
+		if (this.node.children.length) {
+			this.node.lets.forEach((l) => {
+				extract_names(l.value || l.name).forEach((name) => {
+					renderer.add_to_context(name, true);
+				});
+			});
+		}
+		this.attributes = this.node.attributes.map((attribute) => {
+			if (attribute.name === 'style') {
+				return new StyleAttributeWrapper(this, block, attribute);
+			}
+			if (attribute.type === 'Spread') {
+				return new SpreadAttributeWrapper(this, block, attribute);
+			}
+			return new AttributeWrapper(this, block, attribute);
+		});
+		this.has_dynamic_attribute = !!this.attributes.find(
+			(attr) => attr.node.get_dependencies().length > 0
+		);
+		// ordinarily, there'll only be one... but we need to handle
+		// the rare case where an element can have multiple bindings,
+		// e.g. <audio bind:paused bind:currentTime>
+		this.bindings = this.node.bindings.map((binding) => new Binding(block, binding, this));
+		this.event_handlers = this.node.handlers.map(
+			(event_handler) => new EventHandler(event_handler, this)
+		);
+		if (node.intro || node.outro) {
+			if (node.intro) block.add_intro(node.intro.is_local);
+			if (node.outro) block.add_outro(node.outro.is_local);
+		}
+		if (node.animation) {
+			block.add_animation();
+		}
+		block.add_dependencies(node.tag_expr.dependencies);
+		// add directive and handler dependencies
+		[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(
+			(directive) => {
+				if (directive && directive.expression) {
+					block.add_dependencies(directive.expression.dependencies);
+				}
+			}
+		);
+		node.handlers.forEach((handler) => {
+			if (handler.expression) {
+				block.add_dependencies(handler.expression.dependencies);
+			}
+		});
+		this.fragment = new FragmentWrapper(
+			renderer,
+			block,
+			node.children,
+			this,
+			strip_whitespace,
+			next_sibling
+		);
+		this.element_data_name = block.get_unique_name(`${this.var.name}_data`);
+	}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {import('estree').Identifier} parent_node
-     * @param {import('estree').Identifier} parent_nodes
-     */
-    render(block, parent_node, parent_nodes) {
-        if (this.child_dynamic_element) {
-            this.render_dynamic_element(block, parent_node, parent_nodes);
-        }
-        else {
-            this.render_element(block, parent_node, parent_nodes);
-        }
-    }
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('estree').Identifier} parent_node
+	 * @param {import('estree').Identifier} parent_nodes
+	 */
+	render(block, parent_node, parent_nodes) {
+		if (this.child_dynamic_element) {
+			this.render_dynamic_element(block, parent_node, parent_nodes);
+		} else {
+			this.render_element(block, parent_node, parent_nodes);
+		}
+	}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {import('estree').Identifier} parent_node
-     * @param {import('estree').Identifier} parent_nodes
-     */
-    render_dynamic_element(block, parent_node, parent_nodes) {
-        this.child_dynamic_element.render(this.child_dynamic_element_block, null, 
-        /** @type {unknown} */ /** @type {import('estree').Identifier} */ ((x `#nodes`)));
-        const is_tag_dynamic = this.node.tag_expr.dynamic_dependencies().length > 0;
-        const tag = this.node.tag_expr.manipulate(block);
-        block.chunks.init.push(b `
-			${this.renderer.options.dev && b `@validate_dynamic_element(${tag});`}
-			${this.renderer.options.dev &&
-            this.node.children.length > 0 &&
-            b `@validate_void_dynamic_element(${tag});`}
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('estree').Identifier} parent_node
+	 * @param {import('estree').Identifier} parent_nodes
+	 */
+	render_dynamic_element(block, parent_node, parent_nodes) {
+		this.child_dynamic_element.render(
+			this.child_dynamic_element_block,
+			null,
+			/** @type {unknown} */ /** @type {import('estree').Identifier} */ (x`#nodes`)
+		);
+		const is_tag_dynamic = this.node.tag_expr.dynamic_dependencies().length > 0;
+		const tag = this.node.tag_expr.manipulate(block);
+		block.chunks.init.push(b`
+			${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
+			${
+				this.renderer.options.dev &&
+				this.node.children.length > 0 &&
+				b`@validate_void_dynamic_element(${tag});`
+			}
 			let ${this.var} = ${tag} && ${this.child_dynamic_element_block.name}(#ctx);
 		`);
-        block.chunks.create.push(b `
+		block.chunks.create.push(b`
 			if (${this.var}) ${this.var}.c();
 		`);
-        if (this.renderer.options.hydratable) {
-            block.chunks.claim.push(b `
+		if (this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
 				if (${this.var}) ${this.var}.l(${parent_nodes});
 			`);
-        }
-        block.chunks.mount.push(b `
+		}
+		block.chunks.mount.push(b`
 			if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
 		`);
-        if (is_tag_dynamic) {
-            const previous_tag = block.get_unique_name('previous_tag');
-            block.add_variable(previous_tag, tag);
-            const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
-            const has_transitions = !!(this.node.intro || this.node.outro);
-            const not_equal = this.renderer.component.component_options.immutable
-                ? x `@not_equal`
-                : x `@safe_not_equal`;
-            const tag_will_be_removed = block.get_unique_name('tag_will_be_removed');
-            if (has_transitions) {
-                block.add_variable(tag_will_be_removed, x `false`);
-            }
-            block.chunks.update.push(b `
+		if (is_tag_dynamic) {
+			const previous_tag = block.get_unique_name('previous_tag');
+			block.add_variable(previous_tag, tag);
+			const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			const has_transitions = !!(this.node.intro || this.node.outro);
+			const not_equal = this.renderer.component.component_options.immutable
+				? x`@not_equal`
+				: x`@safe_not_equal`;
+			const tag_will_be_removed = block.get_unique_name('tag_will_be_removed');
+			if (has_transitions) {
+				block.add_variable(tag_will_be_removed, x`false`);
+			}
+			block.chunks.update.push(b`
 				if (${tag}) {
 					if (!${previous_tag}) {
 						${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
 						${previous_tag} = ${tag};
 						${this.var}.c();
-						${has_transitions && b `@transition_in(${this.var})`}
+						${has_transitions && b`@transition_in(${this.var})`}
 						${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
 					} else if (${not_equal}(${previous_tag}, ${tag})) {
 						${this.var}.d(1);
-						${this.renderer.options.dev && b `@validate_dynamic_element(${tag});`}
-						${this.renderer.options.dev &&
-                this.node.children.length > 0 &&
-                b `@validate_void_dynamic_element(${tag});`}
+						${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
+						${
+							this.renderer.options.dev &&
+							this.node.children.length > 0 &&
+							b`@validate_void_dynamic_element(${tag});`
+						}
 						${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
 						${previous_tag} = ${tag};
 						${this.var}.c();
-						${has_transitions &&
-                b `if (${tag_will_be_removed}) {
+						${
+							has_transitions &&
+							b`if (${tag_will_be_removed}) {
 							${tag_will_be_removed} = false;
 							@transition_in(${this.var})
-						}`}
+						}`
+						}
 						${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
 					} else {
-						${has_transitions &&
-                b `if (${tag_will_be_removed}) {
+						${
+							has_transitions &&
+							b`if (${tag_will_be_removed}) {
 							${tag_will_be_removed} = false;
 							@transition_in(${this.var})
-						}`}
+						}`
+						}
 						${this.var}.p(#ctx, #dirty);
 					}
 				} else if (${previous_tag}) {
-					${has_transitions
-                ? b `
+					${
+						has_transitions
+							? b`
 								${tag_will_be_removed} = true;
 								@group_outros();
 								@transition_out(${this.var}, 1, 1, () => {
@@ -364,470 +408,498 @@ export default class ElementWrapper extends Wrapper {
 								});
 								@check_outros();
 							`
-                : b `
+							: b`
 								${this.var}.d(1);
 								${this.var} = null;
 								${previous_tag} = ${tag};
-							`}
+							`
+					}
 				}
 			`);
-        }
-        else {
-            block.chunks.update.push(b `
+		} else {
+			block.chunks.update.push(b`
 				if (${tag}) {
 					${this.var}.p(#ctx, #dirty);
 				}
 			`);
-        }
-        if (this.child_dynamic_element_block.has_intros) {
-            block.chunks.intro.push(b `@transition_in(${this.var});`);
-        }
-        if (this.child_dynamic_element_block.has_outros) {
-            block.chunks.outro.push(b `@transition_out(${this.var});`);
-        }
-        block.chunks.destroy.push(b `if (${this.var}) ${this.var}.d(detaching)`);
-        if (this.node.animation) {
-            const measurements = block.get_unique_name('measurements');
-            block.add_variable(measurements);
-            block.chunks.measure.push(b `${measurements} = ${this.var}.r()`);
-            block.chunks.fix.push(b `${this.var}.f();`);
-            block.chunks.animate.push(b `
+		}
+		if (this.child_dynamic_element_block.has_intros) {
+			block.chunks.intro.push(b`@transition_in(${this.var});`);
+		}
+		if (this.child_dynamic_element_block.has_outros) {
+			block.chunks.outro.push(b`@transition_out(${this.var});`);
+		}
+		block.chunks.destroy.push(b`if (${this.var}) ${this.var}.d(detaching)`);
+		if (this.node.animation) {
+			const measurements = block.get_unique_name('measurements');
+			block.add_variable(measurements);
+			block.chunks.measure.push(b`${measurements} = ${this.var}.r()`);
+			block.chunks.fix.push(b`${this.var}.f();`);
+			block.chunks.animate.push(b`
 				${this.var}.s(${measurements});
 				${this.var}.a()
 			`);
-        }
-    }
-    is_dom_node() {
-        return super.is_dom_node() && !this.child_dynamic_element;
-    }
+		}
+	}
+	is_dom_node() {
+		return super.is_dom_node() && !this.child_dynamic_element;
+	}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {import('estree').Identifier} parent_node
-     * @param {import('estree').Identifier} parent_nodes
-     */
-    render_element(block, parent_node, parent_nodes) {
-        const { renderer } = this;
-        const hydratable = renderer.options.hydratable;
-        if (this.node.name === 'noscript')
-            return;
-        const node = this.var;
-        const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
-        const children = x `@children(${this.node.name === 'template' ? x `${node}.content` : node})`;
-        block.add_variable(node);
-        const render_statement = this.get_render_statement(block);
-        block.chunks.create.push(b `${node} = ${render_statement};`);
-        const { can_use_textcontent, can_optimise_to_html_string } = this.node;
-        if (hydratable) {
-            if (parent_nodes) {
-                block.chunks.claim.push(b `
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('estree').Identifier} parent_node
+	 * @param {import('estree').Identifier} parent_nodes
+	 */
+	render_element(block, parent_node, parent_nodes) {
+		const { renderer } = this;
+		const hydratable = renderer.options.hydratable;
+		if (this.node.name === 'noscript') return;
+		const node = this.var;
+		const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
+		const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`;
+		block.add_variable(node);
+		const render_statement = this.get_render_statement(block);
+		block.chunks.create.push(b`${node} = ${render_statement};`);
+		const { can_use_textcontent, can_optimise_to_html_string } = this.node;
+		if (hydratable) {
+			if (parent_nodes) {
+				block.chunks.claim.push(b`
 					${node} = ${this.get_claim_statement(block, parent_nodes, can_optimise_to_html_string)};
 				`);
-                if (!can_optimise_to_html_string && !this.void && this.node.children.length > 0) {
-                    block.chunks.claim.push(b `
+				if (!can_optimise_to_html_string && !this.void && this.node.children.length > 0) {
+					block.chunks.claim.push(b`
 						var ${nodes} = ${children};
 					`);
-                }
-            }
-            else {
-                block.chunks.claim.push(b `${node} = ${render_statement};`);
-            }
-        }
-        if (parent_node) {
-            const append = b `@append(${parent_node}, ${node});`;
-            ( /** @type {import('estree').CallExpression} */(( /** @type {import('estree').ExpressionStatement} */(append[0])).expression)).callee.loc = {
-                start: this.renderer.locate(this.node.start),
-                end: this.renderer.locate(this.node.end)
-            };
-            block.chunks.mount.push(append);
-            if (is_head(parent_node)) {
-                block.chunks.destroy.push(b `@detach(${node});`);
-            }
-        }
-        else {
-            const insert = b `@insert(#target, ${node}, #anchor);`;
-            ( /** @type {import('estree').CallExpression} */(( /** @type {import('estree').ExpressionStatement} */(insert[0])).expression)).callee.loc = {
-                start: this.renderer.locate(this.node.start),
-                end: this.renderer.locate(this.node.end)
-            };
-            block.chunks.mount.push(insert);
-            // TODO we eventually need to consider what happens to elements
-            // that belong to the same outgroup as an outroing element...
-            block.chunks.destroy.push(b `if (detaching) @detach(${node});`);
-        }
-        // insert static children with textContent or innerHTML
-        // skip textcontent for <template>.  append nodes to TemplateElement.content instead
-        if (can_optimise_to_html_string) {
-            if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
-                let text = string_literal(( /** @type {import('../Text.js').default} */(this.fragment.nodes[0])).data);
-                if (hydratable) {
-                    const variable = block.get_unique_name('textContent');
-                    block.add_variable(variable, text);
-                    text = variable;
-                }
-                block.chunks.create.push(b `${node}.textContent = ${text};`);
-                if (hydratable) {
-                    block.chunks.claim.push(b `if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.textContent = ${text};`);
-                }
-            }
-            else {
-                const state = {
-                    quasi: {
-                        type: 'TemplateElement',
-                        value: { raw: '' }
-                    }
-                };
-                let literal = {
-                    type: 'TemplateLiteral',
-                    expressions: [],
-                    quasis: []
-                };
-                const can_use_raw_text = !this.node.can_use_innerhtml && can_use_textcontent;
-                to_html(
-
-                /** @type {unknown} */ /** @type {Array<ElementWrapper | import('../Comment.js').default | import('../Text.js').default>} */ ((this.fragment.nodes)), block, literal, state, can_use_raw_text);
-                literal.quasis.push(/** @type {any} */ (state.quasi));
-                if (hydratable) {
-                    const variable = block.get_unique_name('textContent');
-                    block.add_variable(variable, literal);
-                    literal = variable;
-                }
-                const property = this.node.can_use_innerhtml ? 'innerHTML' : 'textContent';
-                block.chunks.create.push(b `${node}.${property} = ${literal};`);
-                if (hydratable) {
-                    block.chunks.claim.push(b `if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.${property} = ${literal};`);
-                }
-            }
-        }
-        else {
-            this.fragment.nodes.forEach((child) => {
-                child.render(block, this.node.name === 'template' ? x `${node}.content` : node, nodes, {
-                    element_data_name: this.element_data_name
-                });
-            });
-        }
-        const event_handler_or_binding_uses_context = this.bindings.some((binding) => binding.handler.uses_context) ||
-            this.node.handlers.some((handler) => handler.uses_context) ||
-            this.node.actions.some((action) => action.uses_context);
-        if (event_handler_or_binding_uses_context) {
-            block.maintain_context = true;
-        }
-        if (this.node.is_dynamic_element) {
-            this.add_dynamic_element_attributes(block);
-        }
-        else {
-            this.add_attributes(block);
-        }
-        this.add_directives_in_order(block);
-        this.add_transitions(block);
-        this.add_animation(block);
-        this.add_classes(block);
-        this.add_styles(block);
-        this.add_manual_style_scoping(block);
-        if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
-            block.chunks.claim.push(b `${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`);
-        }
-        if (renderer.options.dev) {
-            const loc = renderer.locate(this.node.start);
-            block.chunks.hydrate.push(b `@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${this.node.start});`);
-        }
-        block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
-    }
-
-    /** @param {import('../../Block.js').default} block */
-    get_render_statement(block) {
-        const { name, namespace, tag_expr } = this.node;
-        const reference = tag_expr.manipulate(block);
-        if (namespace === namespaces.svg) {
-            return x `@svg_element(${reference})`;
-        }
-        if (namespace) {
-            return x `@_document.createElementNS("${namespace}", "${name}")`;
-        }
+				}
+			} else {
+				block.chunks.claim.push(b`${node} = ${render_statement};`);
+			}
+		}
+		if (parent_node) {
+			const append = b`@append(${parent_node}, ${node});`;
+			/** @type {import('estree').CallExpression} */ (
+				/** @type {import('estree').ExpressionStatement} */ (append[0]).expression
+			).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(append);
+			if (is_head(parent_node)) {
+				block.chunks.destroy.push(b`@detach(${node});`);
+			}
+		} else {
+			const insert = b`@insert(#target, ${node}, #anchor);`;
+			/** @type {import('estree').CallExpression} */ (
+				/** @type {import('estree').ExpressionStatement} */ (insert[0]).expression
+			).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(insert);
+			// TODO we eventually need to consider what happens to elements
+			// that belong to the same outgroup as an outroing element...
+			block.chunks.destroy.push(b`if (detaching) @detach(${node});`);
+		}
+		// insert static children with textContent or innerHTML
+		// skip textcontent for <template>.  append nodes to TemplateElement.content instead
+		if (can_optimise_to_html_string) {
+			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
+				let text = string_literal(
+					/** @type {import('../Text.js').default} */ (this.fragment.nodes[0]).data
+				);
+				if (hydratable) {
+					const variable = block.get_unique_name('textContent');
+					block.add_variable(variable, text);
+					text = variable;
+				}
+				block.chunks.create.push(b`${node}.textContent = ${text};`);
+				if (hydratable) {
+					block.chunks.claim.push(
+						b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.textContent = ${text};`
+					);
+				}
+			} else {
+				const state = {
+					quasi: {
+						type: 'TemplateElement',
+						value: { raw: '' }
+					}
+				};
+				let literal = {
+					type: 'TemplateLiteral',
+					expressions: [],
+					quasis: []
+				};
+				const can_use_raw_text = !this.node.can_use_innerhtml && can_use_textcontent;
+				to_html(
+					/** @type {unknown} */ /** @type {Array<ElementWrapper | import('../Comment.js').default | import('../Text.js').default>} */ (
+						this.fragment.nodes
+					),
+					block,
+					literal,
+					state,
+					can_use_raw_text
+				);
+				literal.quasis.push(/** @type {any} */ (state.quasi));
+				if (hydratable) {
+					const variable = block.get_unique_name('textContent');
+					block.add_variable(variable, literal);
+					literal = variable;
+				}
+				const property = this.node.can_use_innerhtml ? 'innerHTML' : 'textContent';
+				block.chunks.create.push(b`${node}.${property} = ${literal};`);
+				if (hydratable) {
+					block.chunks.claim.push(
+						b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.${property} = ${literal};`
+					);
+				}
+			}
+		} else {
+			this.fragment.nodes.forEach((child) => {
+				child.render(block, this.node.name === 'template' ? x`${node}.content` : node, nodes, {
+					element_data_name: this.element_data_name
+				});
+			});
+		}
+		const event_handler_or_binding_uses_context =
+			this.bindings.some((binding) => binding.handler.uses_context) ||
+			this.node.handlers.some((handler) => handler.uses_context) ||
+			this.node.actions.some((action) => action.uses_context);
+		if (event_handler_or_binding_uses_context) {
+			block.maintain_context = true;
+		}
+		if (this.node.is_dynamic_element) {
+			this.add_dynamic_element_attributes(block);
+		} else {
+			this.add_attributes(block);
+		}
+		this.add_directives_in_order(block);
+		this.add_transitions(block);
+		this.add_animation(block);
+		this.add_classes(block);
+		this.add_styles(block);
+		this.add_manual_style_scoping(block);
+		if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
+			block.chunks.claim.push(
+				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
+			);
+		}
+		if (renderer.options.dev) {
+			const loc = renderer.locate(this.node.start);
+			block.chunks.hydrate.push(
+				b`@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${
+					this.node.start
+				});`
+			);
+		}
+		block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
+	}
 
-        /** @type {import('./Attribute.js').default} */
-        const is = /** @type {any} */ (this.attributes.find((attr) => attr.node.name === 'is'));
-        if (is) {
-            return x `@element_is("${name}", ${is
-                .render_chunks(block)
-                .reduce((lhs, rhs) => x `${lhs} + ${rhs}`)})`;
-        }
-        return x `@element(${reference})`;
-    }
+	/** @param {import('../../Block.js').default} block */
+	get_render_statement(block) {
+		const { name, namespace, tag_expr } = this.node;
+		const reference = tag_expr.manipulate(block);
+		if (namespace === namespaces.svg) {
+			return x`@svg_element(${reference})`;
+		}
+		if (namespace) {
+			return x`@_document.createElementNS("${namespace}", "${name}")`;
+		}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {import('estree').Identifier} nodes
-     * @param {boolean} to_optimise_hydration
-     */
-    get_claim_statement(block, nodes, to_optimise_hydration) {
-        const attributes = this.attributes
-            .filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
-            .map((attr) => p `${( /** @type {import('./StyleAttribute.js').default | import('./Attribute.js').default} */(attr)).name}: true`);
+		/** @type {import('./Attribute.js').default} */
+		const is = /** @type {any} */ (this.attributes.find((attr) => attr.node.name === 'is'));
+		if (is) {
+			return x`@element_is("${name}", ${is
+				.render_chunks(block)
+				.reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
+		}
+		return x`@element(${reference})`;
+	}
 
-        /** @type {Class<x>>} */
-        let reference;
-        if (this.node.tag_expr.node.type === 'Literal') {
-            if (this.node.namespace) {
-                reference = `"${this.node.tag_expr.node.value}"`;
-            }
-            else {
-                reference = `"${(( /** @type {String} */(this.node.tag_expr.node.value)) || '').toUpperCase()}"`;
-            }
-        }
-        else if (this.node.namespace) {
-            reference = x `${this.node.tag_expr.manipulate(block)}`;
-        }
-        else {
-            reference = x `(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
-        }
-        if (to_optimise_hydration) {
-            attributes.push(p `["data-svelte-h"]: true`);
-        }
-        if (this.node.namespace === namespaces.svg) {
-            return x `@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
-        }
-        else {
-            return x `@claim_element(${nodes}, ${reference}, { ${attributes} })`;
-        }
-    }
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('estree').Identifier} nodes
+	 * @param {boolean} to_optimise_hydration
+	 */
+	get_claim_statement(block, nodes, to_optimise_hydration) {
+		const attributes = this.attributes
+			.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
+			.map(
+				(attr) =>
+					p`${
+						/** @type {import('./StyleAttribute.js').default | import('./Attribute.js').default} */ (
+							attr
+						).name
+					}: true`
+			);
 
-    /** @param {import('../../Block.js').default} block */
-    add_directives_in_order(block) {
-        const binding_groups = events
-            .map((event) => ({
-            events: event.event_names,
-            bindings: this.bindings
-                .filter((binding) => binding.node.name !== 'this')
-                .filter((binding) => event.filter(this.node, binding.node.name))
-        }))
-            .filter((group) => group.bindings.length);
-        const this_binding = this.bindings.find((b) => b.node.name === 'this');
+		/** @type {Class<x>>} */
+		let reference;
+		if (this.node.tag_expr.node.type === 'Literal') {
+			if (this.node.namespace) {
+				reference = `"${this.node.tag_expr.node.value}"`;
+			} else {
+				reference = `"${(
+					/** @type {String} */ (this.node.tag_expr.node.value) || ''
+				).toUpperCase()}"`;
+			}
+		} else if (this.node.namespace) {
+			reference = x`${this.node.tag_expr.manipulate(block)}`;
+		} else {
+			reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
+		}
+		if (to_optimise_hydration) {
+			attributes.push(p`["data-svelte-h"]: true`);
+		}
+		if (this.node.namespace === namespaces.svg) {
+			return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
+		} else {
+			return x`@claim_element(${nodes}, ${reference}, { ${attributes} })`;
+		}
+	}
 
-        /** @param {OrderedAttribute} item */
-        function getOrder(item) {
-            if (item instanceof EventHandler) {
-                return item.node.start;
-            }
-            else if (item instanceof Binding) {
-                return item.node.start;
-            }
-            else if (item instanceof Action) {
-                return item.start;
-            }
-            else {
-                return item.bindings[0].node.start;
-            }
-        }
-        (
+	/** @param {import('../../Block.js').default} block */
+	add_directives_in_order(block) {
+		const binding_groups = events
+			.map((event) => ({
+				events: event.event_names,
+				bindings: this.bindings
+					.filter((binding) => binding.node.name !== 'this')
+					.filter((binding) => event.filter(this.node, binding.node.name))
+			}))
+			.filter((group) => group.bindings.length);
+		const this_binding = this.bindings.find((b) => b.node.name === 'this');
 
-        /** @type {OrderedAttribute[]} */ ([
-            ...binding_groups,
-            ...this.event_handlers,
-            this_binding,
-            ...this.node.actions
-        ]))
-            .filter(Boolean)
-            .sort((a, b) => getOrder(a) - getOrder(b))
-            .forEach((item) => {
-            if (item instanceof EventHandler) {
-                add_event_handler(block, this.var, item);
-            }
-            else if (item instanceof Binding) {
-                this.add_this_binding(block, item);
-            }
-            else if (item instanceof Action) {
-                add_action(block, this.var, item);
-            }
-            else {
-                this.add_bindings(block, item);
-            }
-        });
-    }
+		/** @param {OrderedAttribute} item */
+		function getOrder(item) {
+			if (item instanceof EventHandler) {
+				return item.node.start;
+			} else if (item instanceof Binding) {
+				return item.node.start;
+			} else if (item instanceof Action) {
+				return item.start;
+			} else {
+				return item.bindings[0].node.start;
+			}
+		}
+		/** @type {OrderedAttribute[]} */ ([
+			...binding_groups,
+			...this.event_handlers,
+			this_binding,
+			...this.node.actions
+		])
+			.filter(Boolean)
+			.sort((a, b) => getOrder(a) - getOrder(b))
+			.forEach((item) => {
+				if (item instanceof EventHandler) {
+					add_event_handler(block, this.var, item);
+				} else if (item instanceof Binding) {
+					this.add_this_binding(block, item);
+				} else if (item instanceof Action) {
+					add_action(block, this.var, item);
+				} else {
+					this.add_bindings(block, item);
+				}
+			});
+	}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {BindingGroup} binding_group
-     */
-    add_bindings(block, binding_group) {
-        const { renderer } = this;
-        if (binding_group.bindings.length === 0)
-            return;
-        renderer.component.has_reactive_assignments = true;
-        const lock = binding_group.bindings.some((binding) => binding.needs_lock)
-            ? block.get_unique_name(`${this.var.name}_updating`)
-            : null;
-        if (lock)
-            block.add_variable(lock, x `false`);
-        const handler = renderer.component.get_unique_name(`${this.var.name}_${binding_group.events.join('_')}_handler`);
-        renderer.add_to_context(handler.name);
-        // TODO figure out how to handle locks
-        const needs_lock = binding_group.bindings.some((binding) => binding.needs_lock);
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {BindingGroup} binding_group
+	 */
+	add_bindings(block, binding_group) {
+		const { renderer } = this;
+		if (binding_group.bindings.length === 0) return;
+		renderer.component.has_reactive_assignments = true;
+		const lock = binding_group.bindings.some((binding) => binding.needs_lock)
+			? block.get_unique_name(`${this.var.name}_updating`)
+			: null;
+		if (lock) block.add_variable(lock, x`false`);
+		const handler = renderer.component.get_unique_name(
+			`${this.var.name}_${binding_group.events.join('_')}_handler`
+		);
+		renderer.add_to_context(handler.name);
+		// TODO figure out how to handle locks
+		const needs_lock = binding_group.bindings.some((binding) => binding.needs_lock);
 
-        /** @type {Set<string>} */
-        const dependencies = new Set();
+		/** @type {Set<string>} */
+		const dependencies = new Set();
 
-        /** @type {Set<string>} */
-        const contextual_dependencies = new Set();
-        binding_group.bindings.forEach((binding) => {
-            // TODO this is a mess
-            add_to_set(dependencies, binding.get_update_dependencies());
-            add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
-            binding.render(block, lock);
-        });
-        // media bindings — awkward special case. The native timeupdate events
-        // fire too infrequently, so we need to take matters into our
-        // own hands
+		/** @type {Set<string>} */
+		const contextual_dependencies = new Set();
+		binding_group.bindings.forEach((binding) => {
+			// TODO this is a mess
+			add_to_set(dependencies, binding.get_update_dependencies());
+			add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
+			binding.render(block, lock);
+		});
+		// media bindings — awkward special case. The native timeupdate events
+		// fire too infrequently, so we need to take matters into our
+		// own hands
 
-        /** @type {import('estree').Identifier | undefined} */
-        let animation_frame;
-        if (binding_group.events[0] === 'timeupdate') {
-            animation_frame = block.get_unique_name(`${this.var.name}_animationframe`);
-            block.add_variable(animation_frame);
-        }
-        const has_local_function = contextual_dependencies.size > 0 || needs_lock || animation_frame;
-        let callee = renderer.reference(handler);
-        // TODO dry this out — similar code for event handlers and component bindings
-        if (has_local_function) {
-            const args = Array.from(contextual_dependencies).map((name) => renderer.reference(name));
-            // need to create a block-local function that calls an instance-level function
-            if (animation_frame) {
-                block.chunks.init.push(b `
+		/** @type {import('estree').Identifier | undefined} */
+		let animation_frame;
+		if (binding_group.events[0] === 'timeupdate') {
+			animation_frame = block.get_unique_name(`${this.var.name}_animationframe`);
+			block.add_variable(animation_frame);
+		}
+		const has_local_function = contextual_dependencies.size > 0 || needs_lock || animation_frame;
+		let callee = renderer.reference(handler);
+		// TODO dry this out — similar code for event handlers and component bindings
+		if (has_local_function) {
+			const args = Array.from(contextual_dependencies).map((name) => renderer.reference(name));
+			// need to create a block-local function that calls an instance-level function
+			if (animation_frame) {
+				block.chunks.init.push(b`
 					function ${handler}() {
 						@_cancelAnimationFrame(${animation_frame});
 						if (!${this.var}.paused) {
 							${animation_frame} = @raf(${handler});
-							${needs_lock && b `${lock} = true;`}
+							${needs_lock && b`${lock} = true;`}
 						}
 						${callee}.call(${this.var}, ${args});
 					}
 				`);
-            }
-            else {
-                block.chunks.init.push(b `
+			} else {
+				block.chunks.init.push(b`
 					function ${handler}() {
-						${needs_lock && b `${lock} = true;`}
+						${needs_lock && b`${lock} = true;`}
 						${callee}.call(${this.var}, ${args});
 					}
 				`);
-            }
-            callee = handler;
-        }
-        const params = Array.from(contextual_dependencies).map((name) => ({
-            type: 'Identifier',
-            name
-        }));
-        this.renderer.component.partly_hoisted.push(b `
+			}
+			callee = handler;
+		}
+		const params = Array.from(contextual_dependencies).map((name) => ({
+			type: 'Identifier',
+			name
+		}));
+		this.renderer.component.partly_hoisted.push(b`
 			function ${handler}(${params}) {
 				${binding_group.bindings.map((b) => b.handler.mutation)}
 				${Array.from(dependencies)
-            .filter((dep) => dep[0] !== '$')
-            .filter((dep) => !contextual_dependencies.has(dep))
-            .map((dep) => b `${this.renderer.invalidate(dep)};`)}
+					.filter((dep) => dep[0] !== '$')
+					.filter((dep) => !contextual_dependencies.has(dep))
+					.map((dep) => b`${this.renderer.invalidate(dep)};`)}
 			}
 		`);
-        binding_group.events.forEach((name) => {
-            if ([
-                'elementresize',
-                'elementresizecontentbox',
-                'elementresizeborderbox',
-                'elementresizedevicepixelcontentbox'
-            ].indexOf(name) !== -1) {
-                const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
-                block.add_variable(resize_listener);
-                // Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
-                switch (name) {
-                    case 'elementresize':
-                        block.chunks.mount.push(b `${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`);
-                        break;
-                    case 'elementresizecontentbox':
-                        block.chunks.mount.push(b `${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
-                        break;
-                    case 'elementresizeborderbox':
-                        block.chunks.mount.push(b `${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
-                        break;
-                    case 'elementresizedevicepixelcontentbox':
-                        block.chunks.mount.push(b `${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
-                        break;
-                }
-                block.chunks.destroy.push(b `${resize_listener}();`);
-            }
-            else {
-                block.event_listeners.push(x `@listen(${this.var}, "${name}", ${callee})`);
-            }
-        });
-        const some_initial_state_is_undefined = binding_group.bindings
-            .map((binding) => x `${binding.snippet} === void 0`)
-            .reduce((lhs, rhs) => x `${lhs} || ${rhs}`);
-        const should_initialise = this.node.name === 'select' ||
-            binding_group.bindings.find((binding) => binding.node.name === 'indeterminate' ||
-                is_name_contenteditable(binding.node.name) ||
-                binding.is_readonly_media_attribute());
-        if (should_initialise) {
-            const callback = has_local_function ? handler : x `() => ${callee}.call(${this.var})`;
-            block.chunks.hydrate.push(b `if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`);
-        }
-        if (binding_group.events[0] === 'elementresize') {
-            block.chunks.hydrate.push(b `@add_render_callback(() => ${callee}.call(${this.var}));`);
-        }
-        if (lock) {
-            block.chunks.update.push(b `${lock} = false;`);
-        }
-    }
+		binding_group.events.forEach((name) => {
+			if (
+				[
+					'elementresize',
+					'elementresizecontentbox',
+					'elementresizeborderbox',
+					'elementresizedevicepixelcontentbox'
+				].indexOf(name) !== -1
+			) {
+				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
+				block.add_variable(resize_listener);
+				// Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
+				switch (name) {
+					case 'elementresize':
+						block.chunks.mount.push(
+							b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizecontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizeborderbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizedevicepixelcontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+				}
+				block.chunks.destroy.push(b`${resize_listener}();`);
+			} else {
+				block.event_listeners.push(x`@listen(${this.var}, "${name}", ${callee})`);
+			}
+		});
+		const some_initial_state_is_undefined = binding_group.bindings
+			.map((binding) => x`${binding.snippet} === void 0`)
+			.reduce((lhs, rhs) => x`${lhs} || ${rhs}`);
+		const should_initialise =
+			this.node.name === 'select' ||
+			binding_group.bindings.find(
+				(binding) =>
+					binding.node.name === 'indeterminate' ||
+					is_name_contenteditable(binding.node.name) ||
+					binding.is_readonly_media_attribute()
+			);
+		if (should_initialise) {
+			const callback = has_local_function ? handler : x`() => ${callee}.call(${this.var})`;
+			block.chunks.hydrate.push(
+				b`if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`
+			);
+		}
+		if (binding_group.events[0] === 'elementresize') {
+			block.chunks.hydrate.push(b`@add_render_callback(() => ${callee}.call(${this.var}));`);
+		}
+		if (lock) {
+			block.chunks.update.push(b`${lock} = false;`);
+		}
+	}
 
- /**
-  * @param {import('../../Block.js').default} block
-     * @param {import('./Binding.js').default} this_binding
-     */
-    add_this_binding(block, this_binding) {
-        const { renderer } = this;
-        renderer.component.has_reactive_assignments = true;
-        const binding_callback = bind_this(renderer.component, block, this_binding, this.var);
-        block.chunks.mount.push(binding_callback);
-    }
+	/**
+	 * @param {import('../../Block.js').default} block
+	 * @param {import('./Binding.js').default} this_binding
+	 */
+	add_this_binding(block, this_binding) {
+		const { renderer } = this;
+		renderer.component.has_reactive_assignments = true;
+		const binding_callback = bind_this(renderer.component, block, this_binding, this.var);
+		block.chunks.mount.push(binding_callback);
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_attributes(block) {
-        // Get all the class and style dependencies first
-        this.attributes.forEach((attribute) => {
-            if (attribute.node.name === 'class') {
-                const dependencies = attribute.node.get_dependencies();
-                push_array(this.class_dependencies, dependencies);
-            }
-            else if (attribute.node.name === 'style') {
-                add_to_set(this.dynamic_style_dependencies, attribute.node.get_dependencies());
-            }
-        });
-        if (this.node.attributes.some((attr) => attr.is_spread)) {
-            this.add_spread_attributes(block);
-            return;
-        }
-        this.attributes.forEach((attribute) => {
-            attribute.render(block);
-        });
-    }
+	/** @param {import('../../Block.js').default} block */
+	add_attributes(block) {
+		// Get all the class and style dependencies first
+		this.attributes.forEach((attribute) => {
+			if (attribute.node.name === 'class') {
+				const dependencies = attribute.node.get_dependencies();
+				push_array(this.class_dependencies, dependencies);
+			} else if (attribute.node.name === 'style') {
+				add_to_set(this.dynamic_style_dependencies, attribute.node.get_dependencies());
+			}
+		});
+		if (this.node.attributes.some((attr) => attr.is_spread)) {
+			this.add_spread_attributes(block);
+			return;
+		}
+		this.attributes.forEach((attribute) => {
+			attribute.render(block);
+		});
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_spread_attributes(block) {
-        const levels = block.get_unique_name(`${this.var.name}_levels`);
-        const initial_props = [];
-        const updates = [];
-        this.attributes.forEach((attr) => {
-            const dependencies = attr.node.get_dependencies();
-            const condition = dependencies.length > 0 ? block.renderer.dirty(dependencies) : null;
-            if (attr instanceof SpreadAttributeWrapper) {
-                const snippet = attr.node.expression.manipulate(block);
-                initial_props.push(snippet);
-                updates.push(condition ? x `${condition} && ${snippet}` : snippet);
-            }
-            else {
-                const name = attr.property_name || attr.name;
-                initial_props.push(x `{ ${name}: ${attr.get_init(block, attr.get_value(block))} }`);
-                const snippet = x `{ ${name}: ${attr.should_cache ? attr.last : attr.get_value(block)} }`;
-                updates.push(condition ? x `${attr.get_dom_update_conditions(block, condition)} && ${snippet}` : snippet);
-            }
-        });
-        block.chunks.init.push(b `
+	/** @param {import('../../Block.js').default} block */
+	add_spread_attributes(block) {
+		const levels = block.get_unique_name(`${this.var.name}_levels`);
+		const initial_props = [];
+		const updates = [];
+		this.attributes.forEach((attr) => {
+			const dependencies = attr.node.get_dependencies();
+			const condition = dependencies.length > 0 ? block.renderer.dirty(dependencies) : null;
+			if (attr instanceof SpreadAttributeWrapper) {
+				const snippet = attr.node.expression.manipulate(block);
+				initial_props.push(snippet);
+				updates.push(condition ? x`${condition} && ${snippet}` : snippet);
+			} else {
+				const name = attr.property_name || attr.name;
+				initial_props.push(x`{ ${name}: ${attr.get_init(block, attr.get_value(block))} }`);
+				const snippet = x`{ ${name}: ${attr.should_cache ? attr.last : attr.get_value(block)} }`;
+				updates.push(
+					condition ? x`${attr.get_dom_update_conditions(block, condition)} && ${snippet}` : snippet
+				);
+			}
+		});
+		block.chunks.init.push(b`
 			let ${levels} = [${initial_props}];
 
 			let ${this.element_data_name} = {};
@@ -835,137 +907,139 @@ export default class ElementWrapper extends Wrapper {
 				${this.element_data_name} = @assign(${this.element_data_name}, ${levels}[#i]);
 			}
 		`);
-        const fn = this.node.namespace === namespaces.svg
-            ? x `@set_svg_attributes`
-            : this.node.is_dynamic_element
-                ? x `@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
-                : x `@set_attributes`;
-        block.chunks.hydrate.push(b `${fn}(${this.var}, ${this.element_data_name});`);
-        if (this.has_dynamic_attribute) {
-            block.chunks.update.push(b `
+		const fn =
+			this.node.namespace === namespaces.svg
+				? x`@set_svg_attributes`
+				: this.node.is_dynamic_element
+				? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
+				: x`@set_attributes`;
+		block.chunks.hydrate.push(b`${fn}(${this.var}, ${this.element_data_name});`);
+		if (this.has_dynamic_attribute) {
+			block.chunks.update.push(b`
 				${fn}(${this.var}, ${this.element_data_name} = @get_spread_update(${levels}, [
 					${updates}
 				]));
 			`);
-        }
-        // handle edge cases for elements
-        if (this.node.name === 'select') {
-            const dependencies = new Set();
-            for (const attr of this.attributes) {
-                for (const dep of attr.node.dependencies) {
-                    dependencies.add(dep);
-                }
-            }
-            block.chunks.mount.push(b `
+		}
+		// handle edge cases for elements
+		if (this.node.name === 'select') {
+			const dependencies = new Set();
+			for (const attr of this.attributes) {
+				for (const dep of attr.node.dependencies) {
+					dependencies.add(dep);
+				}
+			}
+			block.chunks.mount.push(b`
 				'value' in ${this.element_data_name} && (${this.element_data_name}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
 			`);
-            block.chunks.update.push(b `
-				if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${this.element_data_name}) (${this.element_data_name}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
+			block.chunks.update.push(b`
+				if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${this.element_data_name}) (${
+				this.element_data_name
+			}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
 			`);
-        }
-        else if (this.node.name === 'input' &&
-            this.attributes.find((attr) => attr.node.name === 'value')) {
-            const type = this.node.get_static_attribute_value('type');
-            if (type === null ||
-                type === '' ||
-                type === 'text' ||
-                type === 'email' ||
-                type === 'password') {
-                block.chunks.mount.push(b `
+		} else if (
+			this.node.name === 'input' &&
+			this.attributes.find((attr) => attr.node.name === 'value')
+		) {
+			const type = this.node.get_static_attribute_value('type');
+			if (
+				type === null ||
+				type === '' ||
+				type === 'text' ||
+				type === 'email' ||
+				type === 'password'
+			) {
+				block.chunks.mount.push(b`
 					if ('value' in ${this.element_data_name}) {
 						${this.var}.value = ${this.element_data_name}.value;
 					}
 				`);
-                block.chunks.update.push(b `
+				block.chunks.update.push(b`
 					if ('value' in ${this.element_data_name}) {
 						${this.var}.value = ${this.element_data_name}.value;
 					}
 				`);
-            }
-        }
-        if (['button', 'input', 'keygen', 'select', 'textarea'].includes(this.node.name)) {
-            block.chunks.mount.push(b `
+			}
+		}
+		if (['button', 'input', 'keygen', 'select', 'textarea'].includes(this.node.name)) {
+			block.chunks.mount.push(b`
 				if (${this.var}.autofocus) ${this.var}.focus();
 			`);
-        }
-    }
+		}
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_dynamic_element_attributes(block) {
-        if (this.attributes.length === 0)
-            return;
-        if (this.has_dynamic_attribute) {
-            this.add_spread_attributes(block);
-            return;
-        }
-        const static_attributes = [];
-        this.attributes.forEach((attr) => {
-            if (attr instanceof SpreadAttributeWrapper) {
-                static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node });
-            }
-            else {
-                const name = attr.property_name || attr.name;
-                static_attributes.push(p `${name}: ${attr.get_value(block)}`);
-            }
-        });
-        const fn = this.node.namespace === namespaces.svg
-            ? x `@set_svg_attributes`
-            : this.node.is_dynamic_element
-                ? x `@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
-                : x `@set_attributes`;
-        block.chunks.hydrate.push(b `${fn}(${this.var}, {${static_attributes}});`);
-    }
+	/** @param {import('../../Block.js').default} block */
+	add_dynamic_element_attributes(block) {
+		if (this.attributes.length === 0) return;
+		if (this.has_dynamic_attribute) {
+			this.add_spread_attributes(block);
+			return;
+		}
+		const static_attributes = [];
+		this.attributes.forEach((attr) => {
+			if (attr instanceof SpreadAttributeWrapper) {
+				static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node });
+			} else {
+				const name = attr.property_name || attr.name;
+				static_attributes.push(p`${name}: ${attr.get_value(block)}`);
+			}
+		});
+		const fn =
+			this.node.namespace === namespaces.svg
+				? x`@set_svg_attributes`
+				: this.node.is_dynamic_element
+				? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
+				: x`@set_attributes`;
+		block.chunks.hydrate.push(b`${fn}(${this.var}, {${static_attributes}});`);
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_transitions(block) {
-        const { intro, outro } = this.node;
-        if (!intro && !outro)
-            return;
-        if (intro === outro) {
-            // bidirectional transition
-            const name = block.get_unique_name(`${this.var.name}_transition`);
-            const snippet = intro.expression ? intro.expression.manipulate(block) : x `{}`;
-            block.add_variable(name);
-            const fn = this.renderer.reference(intro.name);
-            const intro_block = b `
+	/** @param {import('../../Block.js').default} block */
+	add_transitions(block) {
+		const { intro, outro } = this.node;
+		if (!intro && !outro) return;
+		if (intro === outro) {
+			// bidirectional transition
+			const name = block.get_unique_name(`${this.var.name}_transition`);
+			const snippet = intro.expression ? intro.expression.manipulate(block) : x`{}`;
+			block.add_variable(name);
+			const fn = this.renderer.reference(intro.name);
+			const intro_block = b`
 				@add_render_callback(() => {
 					if (!#current) return;
 					if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, true);
 					${name}.run(1);
 				});
 			`;
-            const outro_block = b `
+			const outro_block = b`
 				if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, false);
 				${name}.run(0);
 			`;
-            if (intro.is_local) {
-                block.chunks.intro.push(b `
+			if (intro.is_local) {
+				block.chunks.intro.push(b`
 					if (#local) {
 						${intro_block}
 					}
 				`);
-                block.chunks.outro.push(b `
+				block.chunks.outro.push(b`
 					if (#local) {
 						${outro_block}
 					}
 				`);
-            }
-            else {
-                block.chunks.intro.push(intro_block);
-                block.chunks.outro.push(outro_block);
-            }
-            block.chunks.destroy.push(b `if (detaching && ${name}) ${name}.end();`);
-        }
-        else {
-            const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`);
-            const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`);
-            if (intro) {
-                block.add_variable(intro_name);
-                const snippet = intro.expression ? intro.expression.manipulate(block) : x `{}`;
-                const fn = this.renderer.reference(intro.name);
-                let intro_block;
-                if (outro) {
-                    intro_block = b `
+			} else {
+				block.chunks.intro.push(intro_block);
+				block.chunks.outro.push(outro_block);
+			}
+			block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
+		} else {
+			const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`);
+			const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`);
+			if (intro) {
+				block.add_variable(intro_name);
+				const snippet = intro.expression ? intro.expression.manipulate(block) : x`{}`;
+				const fn = this.renderer.reference(intro.name);
+				let intro_block;
+				if (outro) {
+					intro_block = b`
 						@add_render_callback(() => {
 							if (!#current) return;
 							if (${outro_name}) ${outro_name}.end(1);
@@ -973,10 +1047,9 @@ export default class ElementWrapper extends Wrapper {
 							${intro_name}.start();
 						});
 					`;
-                    block.chunks.outro.push(b `if (${intro_name}) ${intro_name}.invalidate();`);
-                }
-                else {
-                    intro_block = b `
+					block.chunks.outro.push(b`if (${intro_name}) ${intro_name}.invalidate();`);
+				} else {
+					intro_block = b`
 						if (!${intro_name}) {
 							@add_render_callback(() => {
 								${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
@@ -984,202 +1057,200 @@ export default class ElementWrapper extends Wrapper {
 							});
 						}
 					`;
-                }
-                if (intro.is_local) {
-                    intro_block = b `
+				}
+				if (intro.is_local) {
+					intro_block = b`
 						if (#local) {
 							${intro_block}
 						}
 					`;
-                }
-                block.chunks.intro.push(intro_block);
-            }
-            if (outro) {
-                block.add_variable(outro_name);
-                const snippet = outro.expression ? outro.expression.manipulate(block) : x `{}`;
-                const fn = this.renderer.reference(outro.name);
-                if (!intro) {
-                    block.chunks.intro.push(b `
+				}
+				block.chunks.intro.push(intro_block);
+			}
+			if (outro) {
+				block.add_variable(outro_name);
+				const snippet = outro.expression ? outro.expression.manipulate(block) : x`{}`;
+				const fn = this.renderer.reference(outro.name);
+				if (!intro) {
+					block.chunks.intro.push(b`
 						if (${outro_name}) ${outro_name}.end(1);
 					`);
-                }
-                // TODO hide elements that have outro'd (unless they belong to a still-outroing
-                // group) prior to their removal from the DOM
-                let outro_block = b `
+				}
+				// TODO hide elements that have outro'd (unless they belong to a still-outroing
+				// group) prior to their removal from the DOM
+				let outro_block = b`
 					${outro_name} = @create_out_transition(${this.var}, ${fn}, ${snippet});
 				`;
-                if (outro.is_local) {
-                    outro_block = b `
+				if (outro.is_local) {
+					outro_block = b`
 						if (#local) {
 							${outro_block}
 						}
 					`;
-                }
-                block.chunks.outro.push(outro_block);
-                block.chunks.destroy.push(b `if (detaching && ${outro_name}) ${outro_name}.end();`);
-            }
-        }
-        if ((intro && intro.expression && intro.expression.dependencies.size) ||
-            (outro && outro.expression && outro.expression.dependencies.size)) {
-            block.maintain_context = true;
-        }
-    }
+				}
+				block.chunks.outro.push(outro_block);
+				block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`);
+			}
+		}
+		if (
+			(intro && intro.expression && intro.expression.dependencies.size) ||
+			(outro && outro.expression && outro.expression.dependencies.size)
+		) {
+			block.maintain_context = true;
+		}
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_animation(block) {
-        if (!this.node.animation)
-            return;
-        const { outro } = this.node;
-        const rect = block.get_unique_name('rect');
-        const stop_animation = block.get_unique_name('stop_animation');
-        block.add_variable(rect);
-        block.add_variable(stop_animation, x `@noop`);
-        block.chunks.measure.push(b `
+	/** @param {import('../../Block.js').default} block */
+	add_animation(block) {
+		if (!this.node.animation) return;
+		const { outro } = this.node;
+		const rect = block.get_unique_name('rect');
+		const stop_animation = block.get_unique_name('stop_animation');
+		block.add_variable(rect);
+		block.add_variable(stop_animation, x`@noop`);
+		block.chunks.measure.push(b`
 			${rect} = ${this.var}.getBoundingClientRect();
 		`);
-        if (block.type === CHILD_DYNAMIC_ELEMENT_BLOCK) {
-            block.chunks.measure.push(b `return ${rect}`);
-            block.chunks.restore_measurements.push(b `${rect} = #measurement;`);
-        }
-        block.chunks.fix.push(b `
+		if (block.type === CHILD_DYNAMIC_ELEMENT_BLOCK) {
+			block.chunks.measure.push(b`return ${rect}`);
+			block.chunks.restore_measurements.push(b`${rect} = #measurement;`);
+		}
+		block.chunks.fix.push(b`
 			@fix_position(${this.var});
 			${stop_animation}();
-			${outro && b `@add_transform(${this.var}, ${rect});`}
+			${outro && b`@add_transform(${this.var}, ${rect});`}
 		`);
 
-        /** @type {Class<x>>} */
-        let params;
-        if (this.node.animation.expression) {
-            params = this.node.animation.expression.manipulate(block);
-            if (this.node.animation.expression.dynamic_dependencies().length) {
-                // if `params` is dynamic, calculate params ahead of time in the `.r()` method
-                const params_var = block.get_unique_name('params');
-                block.add_variable(params_var);
-                block.chunks.measure.push(b `${params_var} = ${params};`);
-                params = params_var;
-            }
-        }
-        else {
-            params = x `{}`;
-        }
-        const name = this.renderer.reference(this.node.animation.name);
-        block.chunks.animate.push(b `
+		/** @type {Class<x>>} */
+		let params;
+		if (this.node.animation.expression) {
+			params = this.node.animation.expression.manipulate(block);
+			if (this.node.animation.expression.dynamic_dependencies().length) {
+				// if `params` is dynamic, calculate params ahead of time in the `.r()` method
+				const params_var = block.get_unique_name('params');
+				block.add_variable(params_var);
+				block.chunks.measure.push(b`${params_var} = ${params};`);
+				params = params_var;
+			}
+		} else {
+			params = x`{}`;
+		}
+		const name = this.renderer.reference(this.node.animation.name);
+		block.chunks.animate.push(b`
 			${stop_animation}();
 			${stop_animation} = @create_animation(${this.var}, ${rect}, ${name}, ${params});
 		`);
-    }
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_classes(block) {
-        const has_spread = this.node.attributes.some((attr) => attr.is_spread);
-        this.node.classes.forEach((class_directive) => {
-            const { expression, name } = class_directive;
-            let snippet;
-            let dependencies;
-            if (expression) {
-                snippet = expression.manipulate(block);
-                dependencies = expression.dependencies;
-            }
-            else {
-                snippet = name;
-                dependencies = new Set([name]);
-            }
-            const updater = b `@toggle_class(${this.var}, "${name}", ${snippet});`;
-            block.chunks.hydrate.push(updater);
-            if ((this.node.is_dynamic_element || has_spread) && this.has_dynamic_attribute) {
-                block.chunks.update.push(updater);
-            }
-            else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
-                const all_dependencies = this.class_dependencies.concat(...dependencies);
-                let condition = block.renderer.dirty(all_dependencies);
-                if (block.has_outros) {
-                    condition = x `!#current || ${condition}`;
-                }
-                // If all of the dependencies are non-dynamic (don't get updated) then there is no reason
-                // to add an updater for this.
-                const any_dynamic_dependencies = all_dependencies.some((dep) => {
-                    const variable = this.renderer.component.var_lookup.get(dep);
-                    return !variable || is_dynamic(variable);
-                });
-                if (any_dynamic_dependencies) {
-                    block.chunks.update.push(b `
+	/** @param {import('../../Block.js').default} block */
+	add_classes(block) {
+		const has_spread = this.node.attributes.some((attr) => attr.is_spread);
+		this.node.classes.forEach((class_directive) => {
+			const { expression, name } = class_directive;
+			let snippet;
+			let dependencies;
+			if (expression) {
+				snippet = expression.manipulate(block);
+				dependencies = expression.dependencies;
+			} else {
+				snippet = name;
+				dependencies = new Set([name]);
+			}
+			const updater = b`@toggle_class(${this.var}, "${name}", ${snippet});`;
+			block.chunks.hydrate.push(updater);
+			if ((this.node.is_dynamic_element || has_spread) && this.has_dynamic_attribute) {
+				block.chunks.update.push(updater);
+			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
+				const all_dependencies = this.class_dependencies.concat(...dependencies);
+				let condition = block.renderer.dirty(all_dependencies);
+				if (block.has_outros) {
+					condition = x`!#current || ${condition}`;
+				}
+				// If all of the dependencies are non-dynamic (don't get updated) then there is no reason
+				// to add an updater for this.
+				const any_dynamic_dependencies = all_dependencies.some((dep) => {
+					const variable = this.renderer.component.var_lookup.get(dep);
+					return !variable || is_dynamic(variable);
+				});
+				if (any_dynamic_dependencies) {
+					block.chunks.update.push(b`
 						if (${condition}) {
 							${updater}
 						}
 					`);
-                }
-            }
-        });
-    }
+				}
+			}
+		});
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_styles(block) {
-        const has_spread = this.node.attributes.some((attr) => attr.is_spread);
+	/** @param {import('../../Block.js').default} block */
+	add_styles(block) {
+		const has_spread = this.node.attributes.some((attr) => attr.is_spread);
 
-        /** @type {import('estree').Identifier | undefined} */
-        let style_changed_var;
-        const maybe_create_style_changed_var = () => {
-            if (!style_changed_var && this.dynamic_style_dependencies.size) {
-                style_changed_var = block.get_unique_name('style_changed');
-                const style_attr_dirty = block.renderer.dirty([...this.dynamic_style_dependencies]);
-                block.chunks.update.push(b `const ${style_changed_var} = ${style_attr_dirty};`);
-            }
-        };
-        this.node.styles.forEach((style_directive) => {
-            const { name, expression, important, should_cache } = style_directive;
-            const snippet = expression.manipulate(block);
-            let cached_snippet;
-            if (should_cache) {
-                cached_snippet = block.get_unique_name(`style_${name.replace(regex_minus_signs, '_')}`);
-                block.add_variable(cached_snippet, snippet);
-            }
-            const updater = b `@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, ${important ? 1 : null})`;
-            block.chunks.hydrate.push(updater);
-            const self_deps = expression.dynamic_dependencies();
-            const all_deps = new Set([...self_deps, ...this.dynamic_style_dependencies]);
-            let condition = block.renderer.dirty([...all_deps]);
-            // Assume that style has changed through the spread attribute
-            if (has_spread) {
-                if (should_cache && all_deps.size) {
-                    // Update the cached value
-                    block.chunks.update.push(b `
+		/** @type {import('estree').Identifier | undefined} */
+		let style_changed_var;
+		const maybe_create_style_changed_var = () => {
+			if (!style_changed_var && this.dynamic_style_dependencies.size) {
+				style_changed_var = block.get_unique_name('style_changed');
+				const style_attr_dirty = block.renderer.dirty([...this.dynamic_style_dependencies]);
+				block.chunks.update.push(b`const ${style_changed_var} = ${style_attr_dirty};`);
+			}
+		};
+		this.node.styles.forEach((style_directive) => {
+			const { name, expression, important, should_cache } = style_directive;
+			const snippet = expression.manipulate(block);
+			let cached_snippet;
+			if (should_cache) {
+				cached_snippet = block.get_unique_name(`style_${name.replace(regex_minus_signs, '_')}`);
+				block.add_variable(cached_snippet, snippet);
+			}
+			const updater = b`@set_style(${this.var}, "${name}", ${
+				should_cache ? cached_snippet : snippet
+			}, ${important ? 1 : null})`;
+			block.chunks.hydrate.push(updater);
+			const self_deps = expression.dynamic_dependencies();
+			const all_deps = new Set([...self_deps, ...this.dynamic_style_dependencies]);
+			let condition = block.renderer.dirty([...all_deps]);
+			// Assume that style has changed through the spread attribute
+			if (has_spread) {
+				if (should_cache && all_deps.size) {
+					// Update the cached value
+					block.chunks.update.push(b`
 						if (${condition}) {
 							${cached_snippet} = ${snippet};
 						}`);
-                }
-                block.chunks.update.push(updater);
-            }
-            else {
-                if (all_deps.size === 0)
-                    return;
-                if (should_cache) {
-                    condition = x `${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
-                }
-                if (this.dynamic_style_dependencies.size > 0) {
-                    maybe_create_style_changed_var();
-                    // If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
-                    condition =
-                        all_deps.size === this.dynamic_style_dependencies.size
-                            ? style_changed_var
-                            : x `${style_changed_var} || ${condition}`;
-                }
-                block.chunks.update.push(b `
+				}
+				block.chunks.update.push(updater);
+			} else {
+				if (all_deps.size === 0) return;
+				if (should_cache) {
+					condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
+				}
+				if (this.dynamic_style_dependencies.size > 0) {
+					maybe_create_style_changed_var();
+					// If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
+					condition =
+						all_deps.size === this.dynamic_style_dependencies.size
+							? style_changed_var
+							: x`${style_changed_var} || ${condition}`;
+				}
+				block.chunks.update.push(b`
 					if (${condition}) {
 						${updater}
 					}
 				`);
-            }
-        });
-    }
+			}
+		});
+	}
 
-    /** @param {import('../../Block.js').default} block */
-    add_manual_style_scoping(block) {
-        if (this.node.needs_manual_style_scoping) {
-            const updater = b `@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;
-            block.chunks.hydrate.push(updater);
-            block.chunks.update.push(updater);
-        }
-    }
+	/** @param {import('../../Block.js').default} block */
+	add_manual_style_scoping(block) {
+		if (this.node.needs_manual_style_scoping) {
+			const updater = b`@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;
+			block.chunks.hydrate.push(updater);
+			block.chunks.update.push(updater);
+		}
+	}
 }
 const regex_backticks = /`/g;
 const regex_dollar_signs = /\$/g;
@@ -1193,85 +1264,90 @@ const regex_dollar_signs = /\$/g;
  * @param {boolean} [can_use_raw_text]
  */
 function to_html(wrappers, block, literal, state, can_use_raw_text) {
-    wrappers.forEach((wrapper) => {
-        if (wrapper instanceof CommentWrapper) {
-            state.quasi.value.raw += wrapper.text();
-        }
-        else if (wrapper instanceof TextWrapper) {
-            // Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
-            // would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
-            if (wrapper.use_space()) {
-                // use space instead of the text content
-                state.quasi.value.raw += ' ';
-                return;
-            }
-            const parent = /** @type {import('../../../nodes/Element.js').default} */ (wrapper.node.parent);
-            const raw = parent && (parent.name === 'script' || parent.name === 'style' || can_use_raw_text);
-            state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data))
-                .replace(regex_backslashes, '\\\\')
-                .replace(regex_backticks, '\\`')
-                .replace(regex_dollar_signs, '\\$');
-        }
-        else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
-            literal.quasis.push(state.quasi);
-            literal.expressions.push(wrapper.node.expression.manipulate(block));
-            state.quasi = {
-                type: 'TemplateElement',
-                value: { raw: '' }
-            };
-        }
-        else if (wrapper.node.name === 'noscript') {
-            // do nothing
-        }
-        else {
-            const nodeName = wrapper.node.name;
-            // element
-            state.quasi.value.raw += `<${nodeName}`;
-            const is_empty_textarea = nodeName === 'textarea' && wrapper.fragment.nodes.length === 0;
-            ( /** @type {ElementWrapper} */(wrapper)).attributes.forEach((attr) => {
-                if (is_empty_textarea && attr.node.name === 'value') {
-                    // The value attribute of <textarea> renders as content.
-                    return;
-                }
-                state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
-                to_html_for_attr_value(attr, block, literal, state);
-                state.quasi.value.raw += '"';
-            });
-            if (!wrapper.void) {
-                state.quasi.value.raw += '>';
-                if (nodeName === 'pre') {
-                    // Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
-                    // see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
-                    const first = wrapper.fragment.nodes[0];
-                    if (first &&
-                        first.node.type === 'Text' &&
-                        regex_starts_with_newline.test(first.node.data)) {
-                        state.quasi.value.raw += '\n';
-                    }
-                }
-                if (is_empty_textarea) {
-                    // The <textarea> renders the value attribute as content because the content is stored in the value attribute.
-                    const value_attribute = wrapper.attributes.find((attr) => attr.node.name === 'value');
-                    if (value_attribute) {
-                        // Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
-                        // see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
-                        const first = value_attribute.node.chunks[0];
-                        if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
-                            state.quasi.value.raw += '\n';
-                        }
-                        to_html_for_attr_value(value_attribute, block, literal, state);
-                    }
-                }
-                to_html(
-
-                /** @type {Array<ElementWrapper | import('../Text.js').default>} */ (wrapper.fragment.nodes), block, literal, state);
-                state.quasi.value.raw += `</${nodeName}>`;
-            }
-            else {
-                state.quasi.value.raw += '/>';
-            }
-        }
-    });
+	wrappers.forEach((wrapper) => {
+		if (wrapper instanceof CommentWrapper) {
+			state.quasi.value.raw += wrapper.text();
+		} else if (wrapper instanceof TextWrapper) {
+			// Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
+			// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
+			if (wrapper.use_space()) {
+				// use space instead of the text content
+				state.quasi.value.raw += ' ';
+				return;
+			}
+			const parent = /** @type {import('../../../nodes/Element.js').default} */ (
+				wrapper.node.parent
+			);
+			const raw =
+				parent && (parent.name === 'script' || parent.name === 'style' || can_use_raw_text);
+			state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data))
+				.replace(regex_backslashes, '\\\\')
+				.replace(regex_backticks, '\\`')
+				.replace(regex_dollar_signs, '\\$');
+		} else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
+			literal.quasis.push(state.quasi);
+			literal.expressions.push(wrapper.node.expression.manipulate(block));
+			state.quasi = {
+				type: 'TemplateElement',
+				value: { raw: '' }
+			};
+		} else if (wrapper.node.name === 'noscript') {
+			// do nothing
+		} else {
+			const nodeName = wrapper.node.name;
+			// element
+			state.quasi.value.raw += `<${nodeName}`;
+			const is_empty_textarea = nodeName === 'textarea' && wrapper.fragment.nodes.length === 0;
+			/** @type {ElementWrapper} */ (wrapper).attributes.forEach((attr) => {
+				if (is_empty_textarea && attr.node.name === 'value') {
+					// The value attribute of <textarea> renders as content.
+					return;
+				}
+				state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
+				to_html_for_attr_value(attr, block, literal, state);
+				state.quasi.value.raw += '"';
+			});
+			if (!wrapper.void) {
+				state.quasi.value.raw += '>';
+				if (nodeName === 'pre') {
+					// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
+					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+					const first = wrapper.fragment.nodes[0];
+					if (
+						first &&
+						first.node.type === 'Text' &&
+						regex_starts_with_newline.test(first.node.data)
+					) {
+						state.quasi.value.raw += '\n';
+					}
+				}
+				if (is_empty_textarea) {
+					// The <textarea> renders the value attribute as content because the content is stored in the value attribute.
+					const value_attribute = wrapper.attributes.find((attr) => attr.node.name === 'value');
+					if (value_attribute) {
+						// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
+						// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+						const first = value_attribute.node.chunks[0];
+						if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
+							state.quasi.value.raw += '\n';
+						}
+						to_html_for_attr_value(value_attribute, block, literal, state);
+					}
+				}
+				to_html(
+					/** @type {Array<ElementWrapper | import('../Text.js').default>} */ (
+						wrapper.fragment.nodes
+					),
+					block,
+					literal,
+					state
+				);
+				state.quasi.value.raw += `</${nodeName}>`;
+			} else {
+				state.quasi.value.raw += '/>';
+			}
+		}
+	});
 }
 
 /**
@@ -1281,25 +1357,21 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
  * @param {any} state
  */
 function to_html_for_attr_value(attr, block, literal, state) {
-    attr.node.chunks.forEach((chunk) => {
-        if (chunk.type === 'Text') {
-            state.quasi.value.raw += escape_html(chunk.data);
-        }
-        else {
-            literal.quasis.push(state.quasi);
-            literal.expressions.push(chunk.manipulate(block));
-            state.quasi = {
-                type: 'TemplateElement',
-                value: { raw: '' }
-            };
-        }
-    });
+	attr.node.chunks.forEach((chunk) => {
+		if (chunk.type === 'Text') {
+			state.quasi.value.raw += escape_html(chunk.data);
+		} else {
+			literal.quasis.push(state.quasi);
+			literal.expressions.push(chunk.manipulate(block));
+			state.quasi = {
+				type: 'TemplateElement',
+				value: { raw: '' }
+			};
+		}
+	});
 }
 
-
-
-
 /** @typedef {Object} BindingGroup
  * @property {string[]} events
- * @property {Binding[]} bindings 
- */
\ No newline at end of file
+ * @property {Binding[]} bindings
+ */