anchor slot instead of using
the href property. Ensure the named slot is directly on the anchor element, without nesting. To ensure accessibility,
the slotted link must be labeled with both the product name, its price and optionally with the original price.
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-link-tile-product heading="Some product" price="718,00 €" price-original="911,00 €" description="Some description" href="https://porsche.com">
<a slot="anchor" href="https://porsche.com">
Weekender, sale price 718,00 €, original price
<s>
911,00 €
</s>
</a>
<img src="assets/placeholder_800x900.svg" width="800" height="900" alt="Some alt text" />
</p-link-tile-product>
<script>
const pLinkTileProduct = document.querySelector("p-link-tile-product");
pLinkTileProduct.addEventListener('like', (e) => e.target.liked = !e.detail.liked);
</script>
</body>
</html>