Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit 3b174c0

Browse files
committed
feat(components): implement css encapsulation for transcluding components
* Extract ComponentCssLoader so it can be shared by ShadowDomComponentFactory and TranscludingComponentFactory * Provide a built-in implementation of WebPlatformShim using css_shim * Implement a CSS transformer similar to the one provided by Platform.JS * Rename EventHandler into ShadowBoundary
1 parent 5f8e276 commit 3b174c0

25 files changed

+1366
-397
lines changed
+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
part of angular.core.dom_internal;
2+
3+
class ComponentCssLoader {
4+
final Http http;
5+
final TemplateCache templateCache;
6+
final WebPlatformShim platformShim;
7+
final ComponentCssRewriter componentCssRewriter;
8+
final dom.NodeTreeSanitizer treeSanitizer;
9+
final Map<_ComponentAssetKey, async.Future<dom.StyleElement>> styleElementCache;
10+
11+
ComponentCssLoader(this.http, this.templateCache, this.platformShim,
12+
this.componentCssRewriter, this.treeSanitizer,
13+
this.styleElementCache);
14+
15+
async.Future<List<dom.StyleElement>> call(String tag, List<String> cssUrls) =>
16+
async.Future.wait(cssUrls.map((url) => _styleElement(tag, url)));
17+
18+
async.Future<dom.StyleElement> _styleElement(String tag, String cssUrl) {
19+
final element = styleElementCache.putIfAbsent(
20+
new _ComponentAssetKey(tag, cssUrl),
21+
() => _loadNewCss(tag, cssUrl));
22+
return element;
23+
}
24+
25+
async.Future _loadNewCss(String tag, String cssUrl) {
26+
return _fetch(cssUrl)
27+
.then((css) => _shim(css, tag, cssUrl))
28+
.then(_buildStyleElement);
29+
}
30+
31+
async.Future<String> _fetch(String cssUrl) {
32+
return http.get(cssUrl, cache: templateCache)
33+
.then((resp) => resp.responseText, onError: (e) => '/* $e */');
34+
}
35+
36+
String _shim(String css, String tag, String cssUrl) {
37+
final shimmed = platformShim.shimCss(css, selector: tag, cssUrl: cssUrl);
38+
return componentCssRewriter(shimmed, selector: tag, cssUrl: cssUrl);
39+
}
40+
41+
dom.StyleElement _buildStyleElement(String css) {
42+
var styleElement = new dom.StyleElement()..appendText(css);
43+
treeSanitizer.sanitizeTree(styleElement);
44+
return styleElement;
45+
}
46+
}
47+
48+
class _ComponentAssetKey {
49+
final String tag;
50+
final String assetUrl;
51+
52+
final String _key;
53+
54+
_ComponentAssetKey(String tag, String assetUrl)
55+
: _key = "$tag|$assetUrl",
56+
this.tag = tag,
57+
this.assetUrl = assetUrl;
58+
59+
@override
60+
String toString() => _key;
61+
62+
@override
63+
int get hashCode => _key.hashCode;
64+
65+
bool operator ==(key) =>
66+
key is _ComponentAssetKey
67+
&& tag == key.tag
68+
&& assetUrl == key.assetUrl;
69+
}

0 commit comments

Comments
 (0)