Sean Hunter freshcutdevelopment

## info-card-v3.js
import {useShadowDOM} from 'aurelia-framework'; //import the useShadowDOM decorator

@useShadowDOM() //decorator provided by the Aurelia framework to use the Shadow DOM
export class InfoCard{
}

## info-card-v3.html
<template>
    <style>
        .card-content {
            border:1px solid grey;
            width: 500px;
            height: 150px;
            margin-bottom:10px;
            padding:20px;
            color: #777;
            background-color: #F7F7F7;

## scoped-css.html
<template>
  <require from="./card-styles.css" as="scoped"></require> //only works in Firefox at the time of writing
    <template id="info-card">
        <div class="card-content">
            <slot name="header">To be replaced with header</slot>
            <div class="card-body">
                <slot name="body"><p>To be replaced with body </p></slot>
            </div>
        </div>
    </template>

## info-card-v2.html
<template id="info-card">
   <slot name="header"><h1>To be replaced with header</h1></slot>
   <slot name="body"><p>To be replaced with body </p></slot>
</template>

## shadow-dom-card-1.html
 <template id="info-card">
    </template>
    <script>

        class XInfoCard extends HTMLElement {
            // Monitor the 'message' attribute for changes.
            static get observedAttributes() { return ['message']; }

            // Respond to attribute changes.
            attributeChangedCallback(attr, oldValue, newValue) {

## vanilla-shadow-dom.html
<html>
  <head></head>
  <body>
    <p id="component-host"></p>
    <script>
      var shadowElement = document.querySelector('#component-host')
        .attachShadow({mode: 'open'});

      shadow.innerHTML = '<span>DOM subtree</span>';
    </script>

## shadow-dom-slots.html
<head>
</head>

<body>
    <template id="info-card">
        <style>
            .card-content {
                border:1px solid grey;
                width: 500px;
                height: 150px;

## shadow-dom-basics.html
<head>
</head>

<body>
    <template id="info-card">
        <style>
            .card-content {
                border:1px solid grey;
                width: 500px;
                height: 150px;

## app.html
<x-info-card message="basic info card content"></x-info-card>

## info-card.js
import {bindable} from 'aurelia-framework'; //import bindable decorator to allow message to be passed down from parent component
export class InfoCard{
  @bindable message;
}
	import {useShadowDOM} from 'aurelia-framework'; //import the useShadowDOM decorator

	@useShadowDOM() //decorator provided by the Aurelia framework to use the Shadow DOM
	export class InfoCard{
	}
	<template>
	<style>
	.card-content {
	border:1px solid grey;
	width: 500px;
	height: 150px;
	margin-bottom:10px;
	padding:20px;
	color: #777;
	background-color: #F7F7F7;
	<template>
	<require from="./card-styles.css" as="scoped"></require> //only works in Firefox at the time of writing
	<template id="info-card">
	<div class="card-content">
	<slot name="header">To be replaced with header</slot>
	<div class="card-body">
	<slot name="body"><p>To be replaced with body </p></slot>
	</div>
	</div>
	</template>
	<template id="info-card">
	<slot name="header"><h1>To be replaced with header</h1></slot>
	<slot name="body"><p>To be replaced with body </p></slot>
	</template>
	<template id="info-card">
	</template>
	<script>

	class XInfoCard extends HTMLElement {
	// Monitor the 'message' attribute for changes.
	static get observedAttributes() { return ['message']; }

	// Respond to attribute changes.
	attributeChangedCallback(attr, oldValue, newValue) {
	<html>
	<head></head>
	<body>
	<p id="component-host"></p>
	<script>
	var shadowElement = document.querySelector('#component-host')
	.attachShadow({mode: 'open'});

	shadow.innerHTML = '<span>DOM subtree</span>';
	</script>
	<head>
	</head>

	<body>
	<template id="info-card">
	<style>
	.card-content {
	border:1px solid grey;
	width: 500px;
	height: 150px;
	import {bindable} from 'aurelia-framework'; //import bindable decorator to allow message to be passed down from parent component
	export class InfoCard{
	@bindable message;
	}