<div class="my-element"></div>

<form>
    <input type="text">
    <button type="Submit">search</button>
</form>
let myElement = document.querySelector('.my-element');

let shadow = myElement.attachShadow({
  mode: 'closed'
});
shadow.innerHTML = `
  <style>
:host {
margin-bottom: 20px;
}
   input {
border: blue solid 3px;
}
button {
background-color: rgb(50, 200, 50);
border: none;
padding: 7px 10px;
border-radius: 5px;
color: white;
text-transform: uppercase;
}
  </style>

  <form>
    <input type="text">
    <button type="Submit">search</button>
</form>
`;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.