Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
raphaelsiz opened this issue Apr 1, 2021 · 2 comments
Open

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

raphaelsiz opened this issue Apr 1, 2021 · 2 comments

Comments

@raphaelsiz
Copy link

raphaelsiz commented Apr 1, 2021 •
edited
Loading

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.
@raphaelsiz raphaelsiz changed the title <img is= <img is="card"> shows the wrong card Apr 1, 2021
@Danny-Engelman
Copy link
Contributor

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
Copy link
Contributor

Danny-Engelman commented Apr 1, 2021 •
edited
Loading

<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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Danny-Engelman @raphaelsiz