<img is="card"> shows the wrong card

raphaelsiz commented 3 years ago

I copied and pasted "\<img is="ten-of-hearts" />" into my html (after including the script) and it just shows the Ace of Spades. The "\<card-t suit="suit" rank="rank">" works fine, so I assume it has to do with the actual html element or the "is" attribute.

Danny-Engelman commented 3 years ago

Yes, it is a bug. But the whole <img is= functionality might be taken out in a next release.

Apple refuses to implement the Customized Built-In Elements part of the W3C standard Custom Elements API.

That means, in Safari, Web Components can't extend from IMG or any other but HTMLElement (Autonomous Elements)

So only <card-t> works cross browser.

Danny-Engelman commented 3 years ago

<img is= works in https://cardmeister.github.io (But not for Safari!)

Because the HTML is injected after page load.

You can also defer loading the script (all elements in the page will be scanned and upgraded)

or (oldskool) placing the script loading at the bottom of the page

<head>
  <script defer src="https://cardmeister.github.io/elements.cardmeister.min.js"></script>
  <style>
    img {
      width: 200px;
    }

  </style>
</head>
<body>
<img is="ten-of-hearts" />
<script>
  document.body.insertAdjacentHTML("beforeend",`<img is="ten-of-hearts"/>`);
</script>
</body>

cardmeister / cardmeister.github.io

<img is="card"> shows the wrong card #1