<style>
    div.text {
        color: red;
        text-decoration: underline;
        font-size: 36px;
    }
</style>
<template>
    <style>
        .text {
            color: blue;
            text-decoration: overline;
            font-size: 28px;
        }

    </style>
    <div class="text">
        <slot name="content">Default text</slot>
    </div>
</template>
<script>
    const template = document.querySelector('template');
    class CustomElement extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: "open"});
            this.shadowRoot.appendChild(template.content.cloneNode(true))
        }

    }
    window.customElements.define('custom-element', CustomElement);
</script>
<custom-element>
    <p slot="content">In the Shadow</p>
</custom-element>
<div class="text">Outside the shadow</div>

{
  "plnkr": {
    "runtime": "system"
  }
}

/* Add your styles here */

// Add your code here