Skip to content

Instantly share code, notes, and snippets.

@mmaz

mmaz/index.html

Last active August 29, 2015 14:04
Show Gist options
  • Save mmaz/6344d5322b4ae21fa2ef to your computer and use it in GitHub Desktop.
Save mmaz/6344d5322b4ae21fa2ef to your computer and use it in GitHub Desktop.
Download ZIP
CSS isolation in polymer
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer CSS test</title>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="test_element.html">
</head>
<body>
<span class="foo">
this should be unstyled
</span>
<div>
<test-element></test-element>
<script type="application/dart">export "package:polymer/init.dart";</script>
</div>
</body>
</html>
Raw
pub deps output
polymer_js_css 0.0.0
dependencies:
- browser 0.10.0+2
- fixnum 0.9.0
- js 0.2.2 [browser]
- polymer 0.11.0+5 [args browser barback code_transformers template_binding smoke html5lib path logging observe yaml web_components source_maps analyzer polymer_expressions]
- protobuf 0.3.3+1 [crypto fixnum]
transitive dependencies:
- analyzer 0.15.7 [logging args path]
- args 0.11.0+1 [collection]
- barback 0.14.0+3 [stack_trace collection source_maps path]
- code_transformers 0.1.5 [barback source_maps path analyzer]
- collection 0.9.4
- crypto 0.9.0
- csslib 0.10.0+1 [logging args source_maps path]
- html5lib 0.11.0+1 [csslib source_maps utf]
- logging 0.9.2
- observe 0.10.1+2 [smoke logging barback source_maps path analyzer]
- path 1.2.2
- polymer_expressions 0.11.2 [observe template_binding browser]
- smoke 0.1.0+1 [logging barback analyzer]
- source_maps 0.9.3 [path]
- stack_trace 0.9.3+2 [path]
- string_scanner 0.0.3 [source_maps path]
- template_binding 0.11.0 [observe]
- utf 0.9.0+1
- web_components 0.4.0
- yaml 1.1.1 [string_scanner collection source_maps path]
Raw
pubspec.yaml
name: polymer_js_css
dependencies:
browser: any
js: any
polymer: any
fixnum: any
protobuf: any
transformers:
- polymer:
entry_points: web/index.html
Raw
test.css
.foo {
color: red;
}
Raw
test_element.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="test-element">
<template>
<link rel="stylesheet" href="test.css">
<span class="foo"> this should be styled </span>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('test-element')
class TestElement extends PolymerElement {
TestElement.created() : super.created();
@override attached() {}
@override detached() {}
}
</script>
</polymer-element>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment