Dimension bindings (clientWidth, clientHeight) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component when resizing the window?

Consider this Svelte component that binds clientWidth and clientHeight to a div. What will be displayed inside the <main> element after resizing the browser window?

Svelte

  <script>
    let width;
    let height;
  </script>

  <main bind:clientWidth={width} bind:clientHeight={height} style="border: 2px solid black; padding: 1rem;">
    <p>Width: {width}</p>
    <p>Height: {height}</p>
  </main>

A The <main> element shows undefined for width and height because clientWidth and clientHeight are not valid bindings.

B The <main> element shows the width and height of the entire document, not the <main> element.

C The <main> element shows the width and height of the <main> element itself, updating on resize.

D The <main> element shows the current width and height of the viewport window.

💡 Hint

Think about what clientWidth and clientHeight measure in the DOM.

The bind:clientWidth and bind:clientHeight bindings in Svelte track the size of the element they are bound to. Here, they measure the <main> element's width and height, updating when it resizes.

❓ state_output

intermediate

What is the value of width after this code runs?

Given this Svelte snippet, what will be the value of width after the component mounts?

Svelte

<script>
  let width = 0;
  let height = 0;
</script>

<div bind:clientWidth={width} bind:clientHeight={height} style="width: 300px; height: 150px;"></div>

A 300, because the <div> has a fixed width of 300px.

B 0, because the bindings update only after user interaction.

C 150, because the height is 150px and width is not set.

D Undefined, because clientWidth binding does not work on <div> elements.

💡 Hint

Remember that clientWidth reflects the element's inner width in pixels.

The bind:clientWidth binding sets width to the

's actual width in pixels, which is 300px as set by the style.

📝 Syntax

advanced

Which option correctly binds both clientWidth and clientHeight in Svelte?

Choose the correct syntax to bind clientWidth and clientHeight of a section element to variables w and h.

A <section bind:clientWidth={w} bind:clientHeight={h}></section>

B <section bind:clientWidth=w bind:clientHeight=h></section>

C <section bind:clientWidth="w" bind:clientHeight="h"></section>

D <section bind:clientWidth={(w)} bind:clientHeight={(h)}></section>

💡 Hint

Recall how Svelte binds variables using curly braces.

Svelte requires curly braces around variable names in bindings to evaluate them as JavaScript expressions. Option A uses correct syntax.

🔧 Debug

advanced

Why does this Svelte component not update width on resize?

Examine this Svelte component. It binds clientWidth but the width variable never updates when resizing the window. What is the cause?

Svelte

<script>
  let width = 0;
</script>

<div bind:clientWidth={width} style="width: 100%; height: 100px; border: 1px solid black;"></div>

A The variable <code>width</code> is not declared with <code>let</code>.

B The style must use pixels instead of percentages for clientWidth to update.

C clientWidth binding only works on <main> elements, not <div>.

D The <div> has 100% width but its parent has no fixed width, so clientWidth does not change.

💡 Hint

Think about how percentage widths depend on parent elements.

If the parent container has no fixed width, the div with 100% width will not have a meaningful clientWidth change on window resize, so width stays the same.

🧠 Conceptual

expert

What is the main difference between binding clientWidth and using window.innerWidth in Svelte?

Choose the best explanation for the difference between binding clientWidth of an element and reading window.innerWidth in a Svelte component.

A <code>clientWidth</code> includes scrollbar width, but <code>window.innerWidth</code> excludes it.

B Binding <code>clientWidth</code> tracks the size of a specific element, while <code>window.innerWidth</code> gives the viewport width regardless of element size.

C Binding <code>clientWidth</code> works only on block elements, while <code>window.innerWidth</code> works only on inline elements.

D <code>window.innerWidth</code> updates automatically on resize, but <code>clientWidth</code> does not update unless manually refreshed.

💡 Hint

Think about what each measurement represents in the browser.

clientWidth measures the visible width of a specific element, updating when that element resizes. window.innerWidth measures the entire viewport width, independent of any element.