Skip to content

Instantly share code, notes, and snippets.

View sorvell's full-sized avatar

Steve Orvell sorvell

222 followers · 0 following
View GitHub Profile
@sorvell
sorvell / gist:5799839
Created June 17, 2013 20:02
ShadowDOM polyfill and css transition
<html>
<head>
<script src="../../../ShadowDOM/shadowdom.js"></script>
<style>
.transformy {
-webkit-transition: -webkit-transform 1s;
background: beige;
}
.flipped {
@sorvell
sorvell / gist:5799845
Created June 17, 2013 20:03
Polyfill - Transition
<!DOCTYPE html>
<html>
<head>
<title>Polyfill-Transition</title>
<script src="../../../ShadowDOM/shadowdom.js"></script>
<style>
.transition {
-webkit-transition: -webkit-transform 1s;
background: beige;
}
@sorvell
sorvell / gist:6527156
Created September 11, 2013 17:43
Failing SD Polyfill distribution
<!DOCTYPE html>
<html>
<head>
<script src="../../../polymer/polymer.js"></script>
</head>
<body>
<template id="host-template">
<div>host shadowRoot</div>
<content></content>
</template>
@sorvell
sorvell / gist:6528827
Created September 11, 2013 19:48
ShadowDOM Polyfill distribution failure
<!DOCTYPE html>
<html>
<head>
<script src="../../../polymer/polymer.js"></script>
</head>
<body>
<x-host>
<x-inner-host></x-inner-host>
</x-host>
@sorvell
sorvell / gist:6583385
Created September 16, 2013 16:58
ShadowDOM + MutationObserver polyfill
<!DOCTYPE html>
<html>
<head>
<script src="../../../ShadowDOM/shadowdom.js"></script>
<script src="../../../MutationObservers/MutationObserver.js"></script>
</head>
<body>
<x-host></x-host>
<script>
function makeSR(scope, selector, html) {
@sorvell
sorvell / gist:6597649
Created September 17, 2013 17:29
SD polyfill nested content distribution failure
<!-- <script src="http://polymer-project.org/polymer.min.js"></script> -->
<script src="../../../polymer/polymer.js"></script>
<template>
<h1>Foo</h1>
<div> <div><content></content></div></div>
</template>
<template id="two">
<h1>Bar</h1>
@sorvell
sorvell / gist:6772909
Created October 1, 2013 01:53
Binding to style using polyfill
<!doctype html>
<html>
<head>
<title>bind simple</title>
<script src="../../../polymer/polymer.js"></script>
</head>
<body>
<x-foo width="100"></x-foo>
<x-foo width="200"></x-foo>
<polymer-element name="x-foo" attributes="width">
@sorvell
sorvell / gist:6910966
Created October 10, 2013 00:24
chrome crash repro
<html>
<head>
<script src="../../polymer/polymer.js"></script>
</head>
<body>
<polymer-element name="x-test">
<template>
<style>
@host {
}
@sorvell
sorvell / gist:6980699
Created October 14, 2013 19:26
Play animation in WebComponentsReady needs timeout
<!DOCTYPE html>
<html>
<head>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-animation-group.html">
</head>
<body>
<polymer-element name="transition-hslide-scale-out" extends="polymer-animation-group" noscript>
<template>
<polymer-animation id="scale-out" duration="0.5">
@sorvell
sorvell / gist:7453526
Created November 13, 2013 18:03
polymer-element: manipulating an attribute containing html
<polymer-element name="x-peeps" attributes="people">
<template>
<div id="bio"></div>
</template>
<script>
Polymer('x-peeps', {
peopleChanged: function() {
this.$.bio.innerHTML = this.people;
}
});