Svelte series – Special elements

Svelte provides a variety of special elements built in. These special elements must be set as top-level elements

svelte:self

Represents the current component, allowing itself to recurse in some cases, which is useful for displaying views such as a tree of folders, where folders can contain other folders

The function based on

is to refer to the constructor of its own component, so it is very easy to cause a stack overflow

So,

must be wrapped in an #if block or #each block, or passed from slot to component, the rest is forbidden

The parent component

<script>
  import Folder from './Folder.svelte';

  let folders = [
    {	
      name: 'music'.folders: [{name: 'Pop music' },
        { name: 'Pure music' },
        { name: 'guitar'}]}, {name: 'movie'.folders: [{name: 'Comedy'.folders: [{name: 'Stephen Chow' },
            { name: 'Huang Bo' },
            { name: 'Shen Teng'}]}, {name: 'Action'.folders: [{name: 'Jet Li'}]}]}];</script>

<Folder name="Root directory" {folders} / >
Copy the code

Sub-component -- Folder

<script>
  export let name = 'noname';
  export let folders = []
</script>

<style>
  ul { padding: 0.2 em 0 0 1.5 em; margin: 0 0 0 0.5 em; list-style: none; }
  li { padding: 0.2 em 0; }
</style>

<span>- {name}</span>

<ul>
  {#each folders as folder}
    <li>
      <! It is not possible to use <Folder> itself directly in fold. svelte, because modules cannot import themselves, so we need to use the svelte:self component -->
      <svelte:self {. folder} / >
    </li>
  {/each}
</ul>
Copy the code

svelte:component

Render different components based on property values, similar to vue’s

<script>
  import Red from './Red.svelte';
  import Green from './Green.svelte';
  import Blue from './Blue.svelte';

  let selected = '0';
  $: component = [Red, Green, Blue][selected]
</script>

<select bind:value={selected}>
  <option value="0">red</option>
  <option value="1">green</option>
  <option value="2">blue</option>
</select>

<! The value of this can be the constructor of any component, and if a false value is provided, the component will not be rendered. -->
<svelte:component this={component} />
Copy the code

svelte:window

You can use

to listen for events on window objects, such as mouse movement events

You can also add an event modifier like preventDefault to the

, just like the DOM element preventDefault

<script>
  let x, y
</script>

<svelte:window on:mousemove={ e= > ({x, y} = e) } />

<p>Mouse position: {x}, {y}</p>
Copy the code

It is also possible to bind some window properties. For some services we may need to monitor the size of the browser window. The native way to do this is to listen to window.onresize

<script>
  let width, height
</script>

<svelte:window bind:innerWidth={width} bind:innerHeight={height} />

<p>Window Size: width={width}, height={height}</p>
Copy the code

The following lists the properties that support binding:

The property name	describe	note
innerWidth	Gets the width of the content area of the browser window, including the vertical scroll bar (if any)	read-only
innerHeight	Gets the height of the content area of the browser window, including the horizontal scroll bar (if any)	read-only
outerWidth	Gets the width of the browser window	read-only
outerHeight	Gets the width of the browser window	read-only
scrollX	The value of pixels that document has scrolled horizontally	You can modify
scrollY	The value of pixels that document has scrolled vertically	You can modify
online	window.navigator.onLineAn alias that represents when the browser is able to access the network	read-only

svelte:body

Like

, the

element allows you to listen for events on document.body. This is useful for mouseEnter and Mouseleave events, which cannot be fired on Windows.

<script>
  let msg = ' '
</script>

<svelte:body
  on:mouseenter={()= > msg = 'Enter'}
  on:mouseleave={() => msg = 'Leave'}
/>

<div>{msg}</div>
Copy the code

svelte:head

The

element allows you to insert other elements into the of the document

can insert elements such as

In server-side render (SSR) mode, the content of

is returned separately from the rest of the HTML.

<svelte:head>
  <title>svelte:head</title>
  <link rel="stylesheet" href="./global.css">
  <meta name="key" content="keys">
  <meta name="description" content="description">
</svelte:head>
Copy the code

svelte:fragment

In some cases, templates have to be written with the help of other elements

However, this may affect the layout of the component or create unnecessary element tags

<! In order to set the slot default, we have to use a div to wrap the default content. In the actual render, the outer div is meaningless. If you want to set the style, it will affect the style Settings accordingly.
<div slot="address">
  <span>name: Steven</span>
  <span>address: Wallaby Way Sydney</span>
</div>
Copy the code

<! -- svelte: Fragment and React fragment tags will be removed automatically during actual render -->
<svelte:fragment slot="address">
  <span>name: Steven</span>
  <span>address: Wallaby Way Sydney</span>
</svelte:fragment>
Copy the code

svelte:options

allows you to configure the editor (Svelte) to compile some of the configuration items when compiling the current component as a native JavaScript class

In 99.9% of cases, you don’t need to manually intervene with the compiler’s default options unless you have a very clear reason.

App.svelte

<script>
  export let x = 'hello'
</script>

<! Accessors is an editor configuration item -->
<svelte:options accessors />

<p>{x}</p>
Copy the code

// When accessors are not added, app. svelte is compiled as the following JS class
class App extends SvelteComponent {
  constructor(options) {
    super(a); init(this, options, instance, create_fragment, safe_not_equal, { x: 0}); }}export default App;
Copy the code

// When accessors are added, app. svelte is compiled as the following JS class
class App extends SvelteComponent {
  constructor(options) {
    super(a); init(this, options, instance, create_fragment, safe_not_equal, { x: 0 });
  }

  // Props (props) props (props)
  get x() {
    return this.$$.ctx[0];
  }

  set x(x) {
    this.$set({ x }); flush(); }}export default App;
Copy the code

Configurable options	function	The default value
immutable	Will use will use variable data If you are sure that mutable data will not be used, svelTE, at compile time, A simple reference equality check is performed to determine whether the value has changed	false
accessors	Whether to add getter and setter methods for the component’s props	false
namespace	The namespace of this component will be used
tag	The name of the label specified when compiling the component into a custom element