如何使用Google AMP创建自己的自定义元素？

<script async src="https://cdn.ampproject.org/v0.js"></script>

<amp-my-custom-element layout="responsive" width="300" height="200"></amp-my-custom-element>

<amp-my-custom-element>
  <amp-img src="image.jpg" width="300" height="200"></amp-img>
  <amp-carousel width="300" height="200" layout="responsive">
    <amp-img src="image1.jpg" width="300" height="200"></amp-img>
    <amp-img src="image2.jpg" width="300" height="200"></amp-img>
    <amp-img src="image3.jpg" width="300" height="200"></amp-img>
  </amp-carousel>
</amp-my-custom-element>

<amp-my-custom-element>
  <button on="tap:my-element.toggleVisibility">Toggle Visibility</button>
  <div id="my-element" hidden>Hello, AMP!</div>
  <script>
    const myElement = document.getElementById('my-element');
    myElement.toggleVisibility = function() {
      myElement.toggleAttribute('hidden');
    };
  </script>
</amp-my-custom-element>

<amp-my-custom-element>
  <style>
    amp-my-custom-element {
      background-color: #f1f1f1;
      padding: 10px;
    }
  </style>
  <p>This is a custom element.</p>
</amp-my-custom-element>