Bento 是一個易於使用的元件庫，可協助您達成優異的網頁體驗。

<bento-base-carousel id="my-carousel">
  <img src="/assets/img/group-1.webp" />
  <img src="/assets/img/group-2.webp" />
  <img src="/assets/img/group-3.webp" />
</bento-base-carousel>

<script>
  (async () => {
    const carousel = document.querySelector('#my-carousel');
    await customElements.whenDefined('bento-base-carousel');
    const api = await carousel.getApi();

    // programatically advance to next slide
    api.next();
  })();
</script>

<bento-accordion id="my-accordion">
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content in section 2.</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>Content in section 3.</p>
  </section>
</bento-accordion>
<script>
  (async () => {
    await customElements.whenDefined('bento-accordion');
    const api = await accordion.getApi();
    const accordion = document.querySelector('#my-accordion');
  })();
</script>

<bento-sidebar id="sidebar1" side="right" hidden>
  <h2>Navigation Sidebar</h2>
  <ul>
    <li>Nav item A</li>
    <li>Nav item B</li>
    <li>Nav item C</li>
    <li>Nav item D</li>
  </ul>
</bento-sidebar>

<div class="buttons">
  <button id="open-sidebar">Open sidebar</button>
</div>

<script>
  (async () => {
    await customElements.whenDefined('bento-sidebar');
    const api = await sidebar.getApi();
    const sidebar = document.querySelector('#sidebar1');
    document.querySelector('#open-sidebar').onclick = () => api.open();
  })();
</script>

<bento-social-share
  id="my-share"
  type="twitter"
  aria-label="Share on Twitter"
></bento-social-share>

<button id="change-share">Change share button</button>

<script>
  (async () => {
    const socialShare = document.querySelector('#my-share');
    const changeShareButton = document.querySelector('#change-share');
    changeShareButton.onclick = () => {
      socialShare.setAttribute('type', 'linkedin');
      socialShare.setAttribute('aria-label', 'Share on LinkedIn');
    };
  })();
</script>