Demonstrate how include works and different ways to style components.

Page styles

<style>
  div {
    border: 1px solid red;
    margin: 5px;
  }

  div p {
    color: blue;
    margin: 0;
  }

  dj-www-components-include-additional div {
    border: 1px green solid;
  }

  dj-www-components-include-2 div p {
    color: green;
  }
</style>

www/components/include.html

<div>
  This is a regular include.
</div>

Regular includes

Different ways to include www/components/include.html. They will all have a red border because of the page style which targets div elements. They have blue text because of the page style which targets div p elements. 

<dj-www/components/include />
<dj-include 'www/components/include' />
<dj-include 'www/components/include.html' />
<dj-include template='www/components/include.html' />

Regular includes with an additional id

Add a differentiator to the wrapping element that gets created around each include. The first will have a green border because of the page style which specifies dj-www-components-include-1. They all have blue text because of the page style which targets div p elements. 

<dj-www/components/include:1 />
<dj-include 'www/components/include:2' />
<dj-include template='www/components/include:2' />

www/components/include-shadow.html

<div>
  This is a shadow include.
</div>

<style>
  div {
    border: 1px solid blue;
    margin: 5px 0 5px 0;
  }

  p {
    margin: 0;
  }
</style>

Shadow includes

Different ways to include www/components/include-shadow.html. They will all have a blue border because of the styles in the include which targets div elements. They will not have blue text because the page style that target div p does not pierce the shadow DOM. 

<dj-www/components/include-shadow! />
<dj-www/components/include-shadow shadow />
<dj-include template='www/components/include-shadow' shadow />
<dj-include 'www/components/include-shadow' shadow />

Slots

This is the new slot. This is the new slot.