# svelte/no-dom-manipulating

disallow DOM manipulating

# 📖 Rule Details

In general, DOM manipulating should delegate to Svelte runtime. If you manipulate the DOM directly, the Svelte runtime may confuse because there is a difference between the actual DOM and the Svelte runtime’s expected DOM. Therefore this rule reports where you use DOM manipulating function. We don’t recommend but If you intentionally manipulate the DOM, simply you can ignore this ESLint report.

<script>
  /* eslint svelte/no-dom-manipulating: "error" */
  let foo, bar, show;

  /* ✓ GOOD */
  const toggle = () => (show = !show);

  /* ✗ BAD */
  const remove = () => Don't manipulate the DOM directly. The Svelte runtime can get confused if there is a difference between the actual DOM and the DOM expected by the Svelte runtime. (svelte/no-dom-manipulating)foo.remove();
  const update = () => (Don't manipulate the DOM directly. The Svelte runtime can get confused if there is a difference between the actual DOM and the DOM expected by the Svelte runtime. (svelte/no-dom-manipulating)bar.textContent = 'Update!');
</script>

{#if show}
  <div bind:this={foo}>Foo</div>
{/if}
<div bind:this={bar}>
  {#if show}
    Bar
  {/if}
</div>

<button on:click={() => toggle()}>Click Me (Good)</button>
<button on:click={() => remove()}>Click Me (Bad)</button>
<button on:click={() => update()}>Click Me (Bad)</button>

This rule only tracks and checks variables given with bind:this={}. In other words, it doesn’t track things like function arguments given to transition: directives. These functions have been well tested and are often used more carefully.

<script>
  /* eslint svelte/no-dom-manipulating: "error" */
  let visible = false;

  function typewriter(node, { speed = 1 }) {
    const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

    if (!valid) {
      throw new Error(`This transition only works on elements with a single text node child`);
    }

    const text = node.textContent;
    const duration = text.length / (speed * 0.01);

    return {
      duration,
      tick: (t) => {
        const i = Math.trunc(text.length * t);
        node.textContent = text.slice(0, i); // It does not report.
      }
    };
  }
</script>

<label>
  <input type="checkbox" bind:checked={visible} />
  visible
</label>

{#if visible}
  <p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
{/if}

# svelte/no-dom-manipulating

# 📖 Rule Details

# 🔧 Options

# 🚀 Version

# 🔍 Implementation