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.

Villanelle

You should try doing it without using Polymer. I think if to a custom element you don't attach a shadowDom you might be able to do it. – Lichenology

Official documentation about it: polymer-library.polymer-project.org/2.0/docs/devguide/… – Saloma

Answer 1

As you said, and as you know :

"Yeah, I know, Shadow DOM is great and all and is one of the main focuses of Web Components."

you used the word inherit, and one great thing about shadow-dom's is that inherited text styles will leak inside the shadows..

for instance :

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

if you didn't override the text styles in your-element they will inherit the font-size property outer style.

if you really want to share styles between your elements, we use the include attribute for the style tag in a dom-module template. For instance,

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

Goldiegoldilocks

include attribute on a <style> tag? Never heard of it. Please provide doc link – Nuss

@Nuss look the question tags. – Goldiegoldilocks

Answer 2

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.

Choreograph

"Great concept" - huh..? I just don't get it? Wouldn't XML namespaces for CSS scoping be so much better - if only IE didn't single handedly killed off the entire XHTML effort by refusing to serve application/xml requests - or whatever... Shadow DOM's feels like the most retarded, rushed, kludge-solution in a long time -possibly even uglier than the god damn BEM class-hysteria. To hell with semantic markup, 90% classes or go home. Why the hell do we even need it, IFRAME's have been doing the same shit since forever. Right now I'm feeling forced to use this crap or be left in the dust. :/ – Carotenoid

Answer 3

What are you trying to achieve?

Say, you extend a Polymer element or even an HTMLElement for that matter.

• If the Super Element, has a template, the child element will inherit the template, until and unless you specify it NOT to, or return false from the template getter in the child element.

• If the parent element Does Not specify a template, you dont inherit one.

That said,

If you want to create a custom element sans template/shadowDOM ,

you only have to define it's properties , and attributes and behavious if any.

This piece of code absolutely creates an element for you without a shadowDOM as you wish

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
}

Since the browser does not in the least know how to paint / layout your custom element, you need to equip it with shadow DOM / custom template via JS

you can not obviously force it to render light DOM, without it having a shadow tree to scope/distribute it to and you naturally can not expect it to render anything without a template.

So, When you say,

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.

it should be quite obvious with the context of templating and shadowDOM, that If you are creating an element, without shadow DOM or a template, you simply can not expect it to render any content, self/distributed

Further,

If inheriting behaviours from a parent element is your objective,

and to do it without rendering something from the parent's template, and / or using only bits from the parent's template

in Polymer, you can skip stuff from the parent template with memoizing Read here

Thoughtless

Thanks for the detailed explanation! Am continuing to understand Polymer, so this helps a lot! Thanks @Schrodinger's cat. – Villanelle