How to create a component without using the Shadow DOM?

Question

I am trying to create a component that does not have a Shadow DOM. Yeah, I know, Shadow DOM is great and all and is one of the main focuses of Web Components. But, let's say I wanted a component's styles to inherit from a parent.

With Shadow DOM

<dom-module id="my-view1">
  <template>
    <div class="card">
      <div class="circle">1</div>
      <h1>View One</h1>
      <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
      <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
    </div>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
    }
    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

I have applied the instructions provided by the Polymer group, to not use a Shadow DOM, at: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

But, if I were to not specify a template or specify static get template() { return false; }, the DOM doesn't even load the elements in the Custom Component.

Answer 1

Shadow dom is a great concept and moving forward we should try to adopt to it, how ever using old libraries is still necessary and we can let go of it yet. These libraries use light dom mostly. Using polymer 2 elements, you can attach to light dom by overriding the _attachDom method of Polymer.ElementMixin here is an example.

class MyElement extends Polymer.Element {

    static get is() { return 'my-element'; }

    static get template() { return `<h1>My element</hi><div><slot><slot></div>`; }

    _attachDom(dom) {
        Polymer.dom(this).appendChild(dom);
    }
}

window.customElements.define(MyElement.is, MyElement);

This will attach the element to the light dom of the element. You can attach the element to any where in your document based on the requirement.