Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Slot content in an anchor tag is not clickable</title>
</head>
<body>
  <p>
    The link below is in a Shadow DOM subtree. The whole link should be
    clickable, but the second phrase, which is assigned to the link via a
    &lt;slot&gt; element, is not clickable.
  </p>
  <p>
    <span id='wrapper'>(These words are not clickable)</span>
  </p>
  <script>
  let element = document.querySelector('#wrapper');
  let root = element.attachShadow({ mode: 'open' });
  root.innerHTML = '<a href="http://example.com">(These words are clickable) <slot></slot></a>';
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JanMiksovskypro
0viewers