This addon uses nullish coalescing operator ??. If you use FastBoot (with Node < v14.0) and only support browsers that natively support ??, you will run into a build error:

/var/folders/2z/93zyyhx13rs879qr8rzyxrb40000gn/T/broccoli-689520dxo26a682Mz/out-529-broccoli_merge_trees/assets/vendor.js:121232
  return this.args.features ?? {};
                             ^
SyntaxError: Unexpected token '?'

To prevent this, please make sure to add node: 'current' to your config/targets.js file.

'use strict';

const browsers = [ ... ];

module.exports = {
  browsers,
  node: 'current'
};

1. Components form a core of an Ember app. We love components!

2. With media queries,

   • A design that looked amazing on 2 or 3 fixed screen sizes can end up looking terrible at a size in-between.

   • Designing the template for specific screen sizes isn't a future-proof solution. You may need to reuse the component under different local width and height constraints.

   • In ember-qunit tests, the window is scaled by default. You may end up stubbing a service (fake the window size) to get certain DOM elements to (dis)appear.

3. With container queries,

   • A component only needs to know how much space it has to figure out how to best present data.

   • Since each component can be free to decide how it looks, a webpage may end up with an unexpected combined look. This may be good, may be bad.

   • In tests, you will be driven to have a correct window size. If the window size is correct, then all elements should (dis)appear just like they would on your browser.

1. A table is great for showing structured data. On mobile, with a limited width, not so much.

2. You can use a list to show data vertically. This works until the user rotates the screen and sees only so much at a time.

3. You can use container queries to decide which table columns to show and how many columns to spread the list across.

1. It's difficult to create dashboard widgets that can be placed anywhere and look good.

2. As a result, you may artificially constrain your users from customizing their dashboard.

3. If you combine media and container queries, you can better meet the wants of designers, developers, and users.

1. Currently, you have to use srcset to load images with the optimal file size. Alternatively, you can use container queries to decide which images to load.

2. Similarly, for videos, you could use container queries to decide format and display resolution.

3. D3 components can use container queries to decide what's the best way to show data. Do you show larger chart elements, show legends, allow scrolling, show text summary? etc.

1. You may be able to compose this addon with others to arrive at something ambitious and unique.

2. For example, ember-printable-pages lets us reuse components to make a printable document. The components could focus on presenting data with container queries, while ember-printable-pages could focus on deciding page layouts and lazily rendering components.

1. You're designing a game in Ember.

2. Maybe a secret, most powerful item appears when the game world is at a certain size? :)

Arguments

You can pass these arguments to the component.

| Name | Required | Description | Type | |--|:--:|--|--| | @features | Yes¹ | Container query definitions | POJO | | @dataAttributePrefix | No | Prefix for data attributes | string | | @debounce | No | Debounce time for resize (ms) | number ≥ 0 | | @tagName | No | Container tag name² | HTML tag name |

^{1. The component renders without error when @features isn't provided. In practice, you will always want to set @features.}

^{2. By default, the component is a <div> element. You can pass a valid HTML tag name to facilitate accessibility and semantic HTML.}

Attributes

You may¹ pass attributes to the component for these reasons:

• Style (e.g. class, local-class)
• Accessibility (e.g. ARIA attributes², roles)

^{1. Do refrain from overusing splattributes (e.g. pass a {{did-insert}} modifier to fetch data), since the component's API may change and cause unexpected results. Practice separation of concerns when possible. For example, data fetching can be handled by another element or @use decorator.}

^{2. When an ARIA attribute has multiple values, the order of values can matter. At the moment, splattributes doesn't guarantee the order.}

Outputs

You can consume these values in your app or addon.

| Name | Yielded | Description | Type | |--|:--:|--|--| | features | Yes | Container query results | POJO | | dimensions | Yes | Container dimensions | POJO | | data-container-query-{featureName} | No | Data attributes for CSS selector | HTML data attribute |

Arguments

All helpers accept these arguments:

| Name | Required | Description | Type | |--|:--:|--|--| | min | Yes¹ | Lower bound for feature² | number ≥ 0 | | max | Yes¹ | Upper bound for feature² | number ≥ 0 |

^{1. The helpers use default values of min = 0 and max = Infinity, and assume the inequalities min ≤ x < max. In practice, you will always want to set min or max (or both).}

^{2. Aspect ratio is unitless. Height and width have the unit of pixel.}

<ContainerQuery
  @features={{hash
    large=(cq-width min=960)
    tall=(cq-height min=400)
  }}
  as |CQ|
>
  {{#let
    (and CQ.features.large CQ.features.tall)
    as |showLyrics|
  }}
    <section local-class="container {{if showLyrics "with-lyrics"}}">
      <header local-class="album-header">
        <h1>{{@model.name}}</h1>
        <p>by <strong>{{@model.band.name}}</strong></p>
      </header>

      <div local-class="album-tracks">
        <Tracks
          @tracks={{@model.tracks}}
        />
      </div>

      {{#if showLyrics}}
        <div local-class="track-lyrics" tabindex="0">
          <Lyrics
            @lyrics={{this.currentTrack.lyrics}}
          />
        </div>
      {{/if}}
    </section>
  {{/let}}
</ContainerQuery>

<ContainerQuery
  @features={{hash
    small=(cq-width max=480)
    medium=(cq-width min=480 max=640)
    large=(cq-width min=640)
    tall=(cq-height min=320)
  }}
  as |CQ|
>
  {{#if (and CQ.features.large CQ.features.tall)}}
    <Tracks::Table
      @tracks={{@tracks}}
    />

  {{else}}
    <Tracks::List
      @numColumns={{
        if CQ.features.small 1
        (if CQ.features.medium 2 3)
      }}
      @tracks={{@tracks}}
    />

  {{/if}}
</ContainerQuery>