Demonstrate how include
works and different ways to style components.
<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>
<div> This is a regular include. </div>
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' />
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' />
<div> This is a shadow include. </div> <style> div { border: 1px solid blue; margin: 5px 0 5px 0; } p { margin: 0; } </style>
Different ways to include www/components/shadow-include.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/shadow-include! /> <dj-www/components/shadow-include shadow /> <dj-include template='www/components/shadow-include' shadow /> <dj-include 'www/components/shadow-include' shadow />