<div id="hello-text" name="Петя"></div>
const helloTextElement = document.getElementById('hello-text');
helloTextElement.attachShadow({mode: 'open'});
helloTextElement.shadowRoot.innerHTML = `
  <style>
    p {font: bold 20px sans-serif}
  </style>
  <p>
    Привет! Меня зовут ${helloTextElement.getAttribute('name')}.
  </p>`;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.