Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using platform.js to get this working on Firefox #1

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/todo-app/component.html
Original file line number Diff line number Diff line change
@@ -100,7 +100,7 @@ <h1>Web Components <strong>Todos</strong></h1>
<!-- Interaction -->

<script>
(function(document){
(function(document, owner){

var TodoAppController = function(context){
// save the context to the custom element
@@ -114,7 +114,7 @@ <h1>Web Components <strong>Todos</strong></h1>
this.shadow = this.context.createShadowRoot();

// stamp out our template in the shadow dom
var template = document.querySelector("#template").content.cloneNode(true);
var template = owner.querySelector("#template").content.cloneNode(true);
this.shadow.appendChild(template);

// Setup event listener
@@ -164,7 +164,7 @@ <h1>Web Components <strong>Todos</strong></h1>
TodoAppController.prototype.renderList = function(){
// Note: renderList() can be significantly optimized. Leaving
// as a Todo for now.

// Get a reference to the todo container within the shadow DOM
var todoContainer = this.shadow.querySelector(".todo-container");
var self = this;
@@ -210,5 +210,5 @@ <h1>Web Components <strong>Todos</strong></h1>
// Register our todo-item tag with the document
document.registerElement('todo-app', {prototype: TodoApp});

})(document.currentScript.ownerDocument);
})(document, (document._currentScript || document.currentScript).ownerDocument);
</script>
6 changes: 3 additions & 3 deletions components/todo-item/component.html
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@

<!-- JS - Interaction -->
<script>
(function(document){
(function(document, owner){

var TodoItemController = function(context){
this.context = context;
@@ -50,7 +50,7 @@
this.shadow = context.createShadowRoot();

// stamp out our template in the shadow dom
var template = document.querySelector("#template").content.cloneNode(true);
var template = owner.querySelector("#template").content.cloneNode(true);
this.shadow.appendChild(template);

// Pick the checkbox
@@ -116,5 +116,5 @@
// register out todo-item tag with the document
document.registerElement('todo-item', {prototype: TodoItem});

})(document.currentScript.ownerDocument);
})(document, (document._currentScript || document.currentScript).ownerDocument);
</script>
14 changes: 12 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
@@ -6,15 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet'>

<script>
if ('registerElement' in document
&& 'createShadowRoot' in HTMLElement.prototype
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// We're using a browser with native WC support!
} else {
document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script>')
}
</script>
<link rel="import" href="components/todo-app/component.html">
</head>
<body>
<todo-app>
<p class="fallback">
Whoops. Your browser doesn't support one or more of the Web Component
features needed to run this demo. Work is underway in Firefox, Safari
features needed to run this demo. Work is underway in Firefox, Safari
and (possibly) IE to change that. Chrome 36+ should run this demo fine
for now. Maybe next time!</p>
</todo-app>
</body>
</html>
</html>