Change component properties

This is for:

Developer

You can programmatically change the properties of an initialized Atomic component. In the following example, the display property of the atomic-result-list component updates based on the width of the window.

<head>
  <!--- ... --->
  <script>
    (async () => {
        await customElements.whenDefined('atomic-search-interface');
        const searchInterface = document.querySelector('#search');

        await searchInterface.initialize({
            accessToken:'<ACCESS_TOKEN>',
            organizationId: '<ORGANIZATION_ID>'
        });

        const { engine } = searchInterface;
        const resultList = document.querySelector('atomic-result-list');
        const body = document.getElementsByTagName('body')[0];

        const resizeObserver = new ResizeObserver(() => { 
          if (window.innerWidth < 700) {
              resultList.setAttribute('display', 'grid'); 
          } else {
              resultList.setAttribute('display', 'table');
          }
        });
        resizeObserver.observe(body); 

      searchInterface.executeFirstSearch();
    })();
  </script>
  <!--- ... --->
</head>

	Create a `ResizeObserver`.
	Compare the window width to a threshold. Change the `display` property of the `atomic-result-list` component accordingly.
	Set the resize observer object to observe the `body` element.