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. Yes, I know, Shadow DOM works great and is one of the main areas of web components. But let's say I wanted component styles to inherit from the 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 applied the instructions provided by the Polymer group to not use the Shadow DOM at: https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

But if I should not point templateor point static get template() { return false; }, the DOM does not even load elements in the user component.

Answer 1

, :

", , Shadow DOM , -."

inherit, , .

:

<style>
  p { font-size: 1.3em }
</style>
<p><your-element></your-element></p>

your-element, font-size.

, include style dom-module. ,

<dom-module id="french-fries-styles">
  <template>
    <style>
      .french-fries {
        display: block;
        width: 100px;
        height: 30px;
        background-color: yellow; /* french fries are yellow */
      }
    </style>
  </template>
</dom-module>

<dom-module id="french-fries-are-tasty">
  <style include="french-fries-styles"></style>
  <div class="french-fries"></div>
</dom-module>

<dom-module id="burger-king">
  <style include="french-fries-styles"></style>
  <div id="burger-king-fries" class="french-fries"></div>
</dom-module>

Answer 2

Shadow dom - , , , . . 2 dom _attachDom Polymer.ElementMixin.

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);

. .

Answer 3

?

, Polymer HTMLElement.

• , , NOT false template getter .

• , .

,

sans template/shadowDOM,

, , .

shadowDOM,

class myApp extends Polymer.Element{
   constructor(){
     super();
   }
   connectedCallback(){ 
    super.connectedCallback();
   }
   static get template(){
    return false;
    // Or, Memoized template
    // Read Docs from link below 
   }
   //Also, define properties , observers, behaviors as per your whim
}

, / , DOM/ JS

DOM, / , , , .

, ,

get() {return false; }, DOM .

templating shadowDOM, shadow DOM template, , , /

,

- /

Polymer, memoizing