shadow dom

by yejin_yang

HTML

<span class='shadow-host'>
  <a href='https://bitsofco.de/what-is-the-shadow-dom/'>
    how the shadow dom works
  </a>
</span>

JavaScript

const shadowEl = document.querySelector('.shadow-host');
const shadow = shadowEl.attachShadow({mode:'closed'});

console.log(shadowEl.shadowRoot);
const link = document.createElement('a');
link.href = shadowEl.querySelector('a').href;
link.innerHTML = `<span aria-lable='shadow dom blog'> <span> ${shadowEl.querySelector('a').textContent}`

shadow.appendChild(link);

const styles = document.createElement('style');
styles.textContent = `
a, span {
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
}

a {
    height: 20px;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
    font-size: 11px;
    font-family:'Helvetica Neue', Arial, sans-serif;
    line-height: 18px;
    text-decoration: none;   
}

a:hover {  background-color: #0c7abf; }

span {
    position: relative;
    top: 2px;
    height: 14px;
    margin-right: 3px;
    background: transparent 0 0 no-repeat;
    background-image:...