Example of using the css attribute to set the code element to populate the CSS editor

        :root { background: hotpink; }
      

Example of using the js attribute to set the code element to populate the JavaScript editor

        document.body.style.backgroundColor = "orange";
      

Example of overwriting all defaults and setting the HTML, CSS and JavaScript editor content by selecting elements with html, css and js attributes

        I'm a rogue code block to ruin this Web Component demo
      

        document.querySelector("p").style.backgroundColor = "orange";
      

        <p>Hello world</p>
      

        :root { color: hotpink; }
      

Example of setting a single element to populate the CSS editor in CodePen

Example of setting a title for the pen and a label on the button

        <p>Hello world</p>
      

Example of setting the code to contenteditable

        <p>Hello world</p>