diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 53c268a27a..5ded7b38da 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -20,14 +20,14 @@ All three sections — script, styles and markup — are optional.
```
-### Script
-
----
+### <script>
A `
```
-You cannot `export default`, since the default export is the component itself.
+### <style>
+
+---
-### Styles
+CSS inside a `
```
-This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
+---
-To apply styles to a selector globally, use the `:global(...)` modifier:
+To apply styles to a selector globally, use the `:global(...)` modifier.
```html
-```
-
-
-### Markup
-
-#### Tags
-
-A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as ``, indicates a *component*.
-
-
-#### Attributes
-
-By default, attributes work exactly like their HTML counterparts:
-
-```html
-
-
-
-```
-
-As in HTML, values may be unquoted:
-
-```html
-
-```
-
-Attribute values can contain JavaScript expressions:
-
-```html
-page {p}
-```
-
-Or they can *be* JavaScript expressions:
-
-```html
-
-```
-
-An expression might include characters that would cause syntax highlighting to fail in regular HTML, in which case quoting the value is permitted. The quotes do not affect how the value is parsed:
-
-```html
-
-```
-
-It's often necessary to pass a property to an element or component directly, so a shorthand is permitted — these two are equivalent:
-
-```html
-
-
-```
-
-*Spread attributes* allow many attributes or properties to be passed to an element or component at once:
-
-```html
-
-```
-
-An element or component can have multiple spread attributes, interspersed with regular ones.
-
-
-#### Text expressions
-
-Text can also contain JavaScript expressions:
-
-```html
-
Hello {name}!
-
{a} + {b} = {a + b}.
-```
-
-#### HTML expressions
-
-In a text expression, characters like `<` and `>` are escaped. An expression can inject HTML with `{@html expression}`:
-
-```html
-
-
{post.title}
- {@html post.content}
-
-```
-
-> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
-
-
-#### If blocks
-
-Content that is conditionally rendered can be wrapped in an `{#if condition}` block, where `condition` is any valid JavaScript expression:
-
-```html
-{#if answer === 42}
-
what was the question?
-{/if}
-```
-
-Additional conditions can be added with `{:else if condition}`, optionally ending in an `{:else}` clause:
-
-```html
-{#if porridge.temperature > 100}
-
too hot!
-{:else if 80 > porridge.temperature}
-
too cold!
-{:else}
-
just right!
-{/if}
-```
-
-
-#### Each blocks
-
-Iterating over lists of values can be done with an `{#each list as item}` block, where `list` is any valid JavaScript expression and `item` is a valid JavaScript identifier, or a destructuring pattern.
-
-```html
-
Shopping list
-
- {#each items as item}
-
{item.name} x {item.qty}
- {/each}
-
-```
-
-An `#each` block can also specify an *index*, equivalent to the second argument in an `array.map(...)` callback:
-
-```html
-{#each items as item, i}
-
{i + 1}: {item.name} x {item.qty}
-{/each}
-```
-
-It can also specify a *key expression* in parentheses — again, any valid JavaScript expression — which is used for list diffing when items are added or removed from the middle of the list:
-
-```html
-{#each items as item, i (item.id)}
-
{i + 1}: {item.name} x {item.qty}
-{/each}
-```
-
-You can freely use destructuring patterns in `each` blocks:
-
-```html
-{#each items as { id, name, qty }, i (id)}
-
{i + 1}: {name} x {qty}
-{/each}
-```
-
-An `#each` block can also have an `{:else}` clause, which is rendered if the list is empty:
-
-```html
-{#each todos as todo}
-
{todo.text}
-{:else}
-
No tasks today!
-{/each}
-```
-
-
-#### Await blocks
-
-Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected:
-
-```html
-{#await promise}
-
-
waiting for the promise to resolve...
-{:then value}
-
-
The value is {value}
-{:catch error}
-
-
Something went wrong: {error.message}
-{/await}
-```
-
-The `catch` block can be omitted if no error is possible, and the initial block can be omitted if you don't care about the pending state:
-
-```html
-{#await promise then value}
-
The value is {value}
-{/await}
-```
-
-
-#### DOM events
-
-Use the `on:` directive to listen to DOM events:
-
-```html
-
-
-
-```
-
-You can add *modifiers* to DOM events with the `|` character:
-
-```html
-
-```
-
-The following modifiers are available:
-
-* `preventDefault` — calls `event.preventDefault()` before running the handler
-* `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-* `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-* `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase
-* `once` — remove the handler after the first time it runs
-
-Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
-
-If the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
-
-
-#### Component events
-
-Components can emit events using [createEventDispatcher](#docs/createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
-
-```html
-
-```
-
-
-
-#### Element bindings
-
-Data ordinarily flows from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-If the name matches the value, you can use a shorthand. These are equivalent:
-
-```html
-
-
-```
-
-Media elements (`