| Index: src/site/docs/tutorials/fetchdata/examples/its_all_about_you/out/web/packages/shadow_dom/src/platform/ShadowCSS.js
|
| diff --git a/src/site/docs/tutorials/fetchdata/examples/its_all_about_you/out/web/packages/shadow_dom/src/platform/ShadowCSS.js b/src/site/docs/tutorials/fetchdata/examples/its_all_about_you/out/web/packages/shadow_dom/src/platform/ShadowCSS.js
|
| deleted file mode 100644
|
| index 96861a13640a6de205b2b21c1c67d1b9c431ba5d..0000000000000000000000000000000000000000
|
| --- a/src/site/docs/tutorials/fetchdata/examples/its_all_about_you/out/web/packages/shadow_dom/src/platform/ShadowCSS.js
|
| +++ /dev/null
|
| @@ -1,452 +0,0 @@
|
| -/*
|
| - * Copyright 2012 The Polymer Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style
|
| - * license that can be found in the LICENSE file.
|
| - */
|
| -
|
| -/*
|
| - This is a limited shim for ShadowDOM css styling.
|
| - https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles
|
| -
|
| - The intention here is to support only the styling features which can be
|
| - relatively simply implemented. The goal is to allow users to avoid the
|
| - most obvious pitfalls and do so without compromising performance significantly.
|
| - For ShadowDOM styling that's not covered here, a set of best practices
|
| - can be provided that should allow users to accomplish more complex styling.
|
| -
|
| - The following is a list of specific ShadowDOM styling features and a brief
|
| - discussion of the approach used to shim.
|
| -
|
| - Shimmed features:
|
| -
|
| - * @host: ShadowDOM allows styling of the shadowRoot's host element using the
|
| - @host rule. To shim this feature, the @host styles are reformatted and
|
| - prefixed with a given scope name and promoted to a document level stylesheet.
|
| - For example, given a scope name of .foo, a rule like this:
|
| -
|
| - @host {
|
| - * {
|
| - background: red;
|
| - }
|
| - }
|
| -
|
| - becomes:
|
| -
|
| - .foo {
|
| - background: red;
|
| - }
|
| -
|
| - * encapsultion: Styles defined within ShadowDOM, apply only to
|
| - dom inside the ShadowDOM. Polymer uses one of two techniques to imlement
|
| - this feature.
|
| -
|
| - By default, rules are prefixed with the host element tag name
|
| - as a descendant selector. This ensures styling does not leak out of the 'top'
|
| - of the element's ShadowDOM. For example,
|
| -
|
| - div {
|
| - font-weight: bold;
|
| - }
|
| -
|
| - becomes:
|
| -
|
| - x-foo div {
|
| - font-weight: bold;
|
| - }
|
| -
|
| - becomes:
|
| -
|
| -
|
| - Alternatively, if Platform.ShadowCSS.strictStyling is set to true then
|
| - selectors are scoped by adding an attribute selector suffix to each
|
| - simple selector that contains the host element tag name. Each element
|
| - in the element's ShadowDOM template is also given the scope attribute.
|
| - Thus, these rules match only elements that have the scope attribute.
|
| - For example, given a scope name of x-foo, a rule like this:
|
| -
|
| - div {
|
| - font-weight: bold;
|
| - }
|
| -
|
| - becomes:
|
| -
|
| - div[x-foo] {
|
| - font-weight: bold;
|
| - }
|
| -
|
| - Note that elements that are dynamically added to a scope must have the scope
|
| - selector added to them manually.
|
| -
|
| - * ::pseudo: These rules are converted to rules that take advantage of the
|
| - pseudo attribute. For example, a shadowRoot like this inside an x-foo
|
| -
|
| - <div pseudo="x-special">Special</div>
|
| -
|
| - with a rule like this:
|
| -
|
| - x-foo::x-special { ... }
|
| -
|
| - becomes:
|
| -
|
| - x-foo [pseudo=x-special] { ... }
|
| -
|
| - Unaddressed ShadowDOM styling features:
|
| -
|
| - * upper/lower bound encapsulation: Styles which are defined outside a
|
| - shadowRoot should not cross the ShadowDOM boundary and should not apply
|
| - inside a shadowRoot.
|
| -
|
| - This styling behavior is not emulated. Some possible ways to do this that
|
| - were rejected due to complexity and/or performance concerns include: (1) reset
|
| - every possible property for every possible selector for a given scope name;
|
| - (2) re-implement css in javascript.
|
| -
|
| - As an alternative, users should make sure to use selectors
|
| - specific to the scope in which they are working.
|
| -
|
| - * ::distributed: This behavior is not emulated. It's often not necessary
|
| - to style the contents of a specific insertion point and instead, descendants
|
| - of the host element can be styled selectively. Users can also create an
|
| - extra node around an insertion point and style that node's contents
|
| - via descendent selectors. For example, with a shadowRoot like this:
|
| -
|
| - <style>
|
| - content::-webkit-distributed(div) {
|
| - background: red;
|
| - }
|
| - </style>
|
| - <content></content>
|
| -
|
| - could become:
|
| -
|
| - <style>
|
| - / *@polyfill .content-container div * /
|
| - content::-webkit-distributed(div) {
|
| - background: red;
|
| - }
|
| - </style>
|
| - <div class="content-container">
|
| - <content></content>
|
| - </div>
|
| -
|
| - Note the use of @polyfill in the comment above a ShadowDOM specific style
|
| - declaration. This is a directive to the styling shim to use the selector
|
| - in comments in lieu of the next selector when running under polyfill.
|
| -*/
|
| -(function(scope) {
|
| -
|
| -var ShadowCSS = {
|
| - strictStyling: false,
|
| - registry: {},
|
| - // Shim styles for a given root associated with a name and extendsName
|
| - // 1. cache root styles by name
|
| - // 2. optionally tag root nodes with scope name
|
| - // 3. shim polyfill directives /* @polyfill */
|
| - // 4. shim @host and scoping
|
| - shimStyling: function(root, name, extendsName) {
|
| - if (root) {
|
| - // use caching to make working with styles nodes easier and to facilitate
|
| - // lookup of extendee
|
| - var def = this.registerDefinition(root, name, extendsName);
|
| - // find styles and apply shimming...
|
| - if (this.strictStyling) {
|
| - this.applyScopeToContent(root, name);
|
| - }
|
| - this.shimPolyfillDirectives(def.rootStyles, name);
|
| - this.applyShimming(def.scopeStyles, name);
|
| - }
|
| - },
|
| - // Shim styles to be placed inside a shadowRoot.
|
| - // 1. shim polyfill directives /* @polyfill */
|
| - // 2. shim @host and scoping
|
| - shimShadowDOMStyling: function(styles, name) {
|
| - this.shimPolyfillDirectives(styles, name);
|
| - this.applyShimming(styles, name);
|
| - },
|
| - registerDefinition: function(root, name, extendsName) {
|
| - var def = this.registry[name] = {
|
| - root: root,
|
| - name: name,
|
| - extendsName: extendsName
|
| - }
|
| - var styles = root.querySelectorAll('style');
|
| - styles = styles ? Array.prototype.slice.call(styles, 0) : [];
|
| - def.rootStyles = styles;
|
| - def.scopeStyles = def.rootStyles;
|
| - var extendee = this.registry[def.extendsName];
|
| - if (extendee) {
|
| - def.scopeStyles = def.scopeStyles.concat(extendee.scopeStyles);
|
| - }
|
| - return def;
|
| - },
|
| - applyScopeToContent: function(root, name) {
|
| - if (root) {
|
| - // add the name attribute to each node in root.
|
| - Array.prototype.forEach.call(root.querySelectorAll('*'),
|
| - function(node) {
|
| - node.setAttribute(name, '');
|
| - });
|
| - // and template contents too
|
| - Array.prototype.forEach.call(root.querySelectorAll('template'),
|
| - function(template) {
|
| - this.applyScopeToContent(template.content, name);
|
| - },
|
| - this);
|
| - }
|
| - },
|
| - /*
|
| - * Process styles to convert native ShadowDOM rules that will trip
|
| - * up the css parser; we rely on decorating the stylesheet with comments.
|
| - *
|
| - * For example, we convert this rule:
|
| - *
|
| - * (comment start) @polyfill @host g-menu-item (comment end)
|
| - * shadow::-webkit-distributed(g-menu-item) {
|
| - *
|
| - * to this:
|
| - *
|
| - * scopeName g-menu-item {
|
| - *
|
| - **/
|
| - shimPolyfillDirectives: function(styles, name) {
|
| - if (styles) {
|
| - Array.prototype.forEach.call(styles, function(s) {
|
| - s.textContent = this.convertPolyfillDirectives(s.textContent, name);
|
| - }, this);
|
| - }
|
| - },
|
| - convertPolyfillDirectives: function(cssText, name) {
|
| - var r = '', l = 0, matches, selector;
|
| - while (matches = cssPolyfillCommentRe.exec(cssText)) {
|
| - r += cssText.substring(l, matches.index);
|
| - // remove end comment delimiter (*/)
|
| - selector = matches[1].slice(0, -2).replace(hostRe, name);
|
| - r += this.scopeSelector(selector, name) + '{';
|
| - l = cssPolyfillCommentRe.lastIndex;
|
| - }
|
| - r += cssText.substring(l, cssText.length);
|
| - return r;
|
| - },
|
| - // apply @host and scope shimming
|
| - applyShimming: function(styles, name) {
|
| - var cssText = this.shimAtHost(styles, name);
|
| - cssText += this.shimScoping(styles, name);
|
| - addCssToDocument(cssText);
|
| - },
|
| - // form: @host { .foo { declarations } }
|
| - // becomes: scopeName.foo { declarations }
|
| - shimAtHost: function(styles, name) {
|
| - if (styles) {
|
| - return this.convertAtHostStyles(styles, name);
|
| - }
|
| - },
|
| - convertAtHostStyles: function(styles, name) {
|
| - var cssText = stylesToCssText(styles);
|
| - var r = '', l=0, matches;
|
| - while (matches = hostRuleRe.exec(cssText)) {
|
| - r += cssText.substring(l, matches.index);
|
| - r += this.scopeHostCss(matches[1], name);
|
| - l = hostRuleRe.lastIndex;
|
| - }
|
| - r += cssText.substring(l, cssText.length);
|
| - var re = new RegExp('^' + name + selectorReSuffix, 'm');
|
| - var cssText = rulesToCss(this.findAtHostRules(cssToRules(r),
|
| - re));
|
| - return cssText;
|
| - },
|
| - scopeHostCss: function(cssText, name) {
|
| - var r = '', matches;
|
| - while (matches = selectorRe.exec(cssText)) {
|
| - r += this.scopeHostSelector(matches[1], name) +' ' + matches[2] + '\n\t';
|
| - }
|
| - return r;
|
| - },
|
| - // supports scopig by name and [is=name] syntax
|
| - scopeHostSelector: function(selector, name) {
|
| - var r = [], parts = selector.split(','), is = '[is=' + name + ']';
|
| - parts.forEach(function(p) {
|
| - p = p.trim();
|
| - // selector: *|:scope -> name
|
| - if (p.match(hostElementRe)) {
|
| - p = p.replace(hostElementRe, name + '$1$3, ' + is + '$1$3');
|
| - // selector: .foo -> name.foo, [bar] -> name[bar]
|
| - } else if (p.match(hostFixableRe)) {
|
| - p = name + p + ', ' + is + p;
|
| - }
|
| - r.push(p);
|
| - }, this);
|
| - return r.join(', ');
|
| - },
|
| - // consider styles that do not include component name in the selector to be
|
| - // unscoped and in need of promotion;
|
| - // for convenience, also consider keyframe rules this way.
|
| - findAtHostRules: function(cssRules, matcher) {
|
| - return Array.prototype.filter.call(cssRules,
|
| - this.isHostRule.bind(this, matcher));
|
| - },
|
| - isHostRule: function(matcher, cssRule) {
|
| - return (cssRule.selectorText && cssRule.selectorText.match(matcher)) ||
|
| - (cssRule.cssRules && this.findAtHostRules(cssRule.cssRules, matcher).length) ||
|
| - (cssRule.type == CSSRule.WEBKIT_KEYFRAMES_RULE);
|
| - },
|
| - /* Ensure styles are scoped. Pseudo-scoping takes a rule like:
|
| - *
|
| - * .foo {... }
|
| - *
|
| - * and converts this to
|
| - *
|
| - * scopeName .foo { ... }
|
| - */
|
| - shimScoping: function(styles, name) {
|
| - if (styles) {
|
| - return this.convertScopedStyles(styles, name);
|
| - }
|
| - },
|
| - convertScopedStyles: function(styles, name) {
|
| - Array.prototype.forEach.call(styles, function(s) {
|
| - if (s.parentNode) {
|
| - s.parentNode.removeChild(s);
|
| - }
|
| - });
|
| - var cssText = stylesToCssText(styles).replace(hostRuleRe, '');
|
| - cssText = this.convertPseudos(cssText);
|
| - var rules = cssToRules(cssText);
|
| - cssText = this.scopeRules(rules, name);
|
| - return cssText;
|
| - },
|
| - convertPseudos: function(cssText) {
|
| - return cssText.replace(cssPseudoRe, ' [pseudo=$1]');
|
| - },
|
| - // change a selector like 'div' to 'name div'
|
| - scopeRules: function(cssRules, name) {
|
| - var cssText = '';
|
| - Array.prototype.forEach.call(cssRules, function(rule) {
|
| - if (rule.selectorText && (rule.style && rule.style.cssText)) {
|
| - cssText += this.scopeSelector(rule.selectorText, name,
|
| - this.strictStyling) + ' {\n\t';
|
| - cssText += this.propertiesFromRule(rule) + '\n}\n\n';
|
| - } else if (rule.media) {
|
| - cssText += '@media ' + rule.media.mediaText + ' {\n';
|
| - cssText += this.scopeRules(rule.cssRules, name);
|
| - cssText += '\n}\n\n';
|
| - } else if (rule.cssText) {
|
| - cssText += rule.cssText + '\n\n';
|
| - }
|
| - }, this);
|
| - return cssText;
|
| - },
|
| - scopeSelector: function(selector, name, strict) {
|
| - var r = [], parts = selector.split(',');
|
| - parts.forEach(function(p) {
|
| - p = p.trim();
|
| - if (this.selectorNeedsScoping(p, name)) {
|
| - p = strict ? this.applyStrictSelectorScope(p, name) :
|
| - this.applySimpleSelectorScope(p, name);
|
| - }
|
| - r.push(p);
|
| - }, this);
|
| - return r.join(', ');
|
| - },
|
| - selectorNeedsScoping: function(selector, name) {
|
| - var matchScope = '(' + name + '|\\[is=' + name + '\\])';
|
| - var re = new RegExp('^' + matchScope + selectorReSuffix, 'm');
|
| - return !selector.match(re);
|
| - },
|
| - // scope via name and [is=name]
|
| - applySimpleSelectorScope: function(selector, name) {
|
| - return name + ' ' + selector + ', ' + '[is=' + name + '] ' + selector;
|
| - },
|
| - // return a selector with [name] suffix on each simple selector
|
| - // e.g. .foo.bar > .zot becomes .foo[name].bar[name] > .zot[name]
|
| - applyStrictSelectorScope: function(selector, name) {
|
| - var splits = [' ', '>', '+', '~'],
|
| - scoped = selector,
|
| - attrName = '[' + name + ']';
|
| - splits.forEach(function(sep) {
|
| - var parts = scoped.split(sep);
|
| - scoped = parts.map(function(p) {
|
| - var t = p.trim();
|
| - if (t && (splits.indexOf(t) < 0) && (t.indexOf(attrName) < 0)) {
|
| - p = t.replace(/([^:]*)(:*)(.*)/, '$1' + attrName + '$2$3')
|
| - }
|
| - return p;
|
| - }).join(sep);
|
| - });
|
| - return scoped;
|
| - },
|
| - propertiesFromRule: function(rule) {
|
| - var properties = rule.style.cssText;
|
| - // TODO(sorvell): Chrome cssom incorrectly removes quotes from the content
|
| - // property. (https://code.google.com/p/chromium/issues/detail?id=247231)
|
| - if (rule.style.content && !rule.style.content.match(/['"]+/)) {
|
| - properties = 'content: \'' + rule.style.content + '\';\n' +
|
| - rule.style.cssText.replace(/content:[^;]*;/g, '');
|
| - }
|
| - return properties;
|
| - }
|
| -};
|
| -
|
| -var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
|
| - selectorRe = /([^{]*)({[\s\S]*?})/gim,
|
| - hostElementRe = /(.*)((?:\*)|(?:\:scope))(.*)/,
|
| - hostFixableRe = /^[.\[:]/,
|
| - cssCommentRe = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
|
| - cssPolyfillCommentRe = /\/\*\s*@polyfill ([^*]*\*+([^/*][^*]*\*+)*\/)([^{]*?){/gim,
|
| - cssPseudoRe = /::(x-[^\s{,(]*)/gim,
|
| - selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
|
| - hostRe = /@host/gim;
|
| -
|
| -function stylesToCssText(styles, preserveComments) {
|
| - var cssText = '';
|
| - Array.prototype.forEach.call(styles, function(s) {
|
| - cssText += s.textContent + '\n\n';
|
| - });
|
| - // strip comments for easier processing
|
| - if (!preserveComments) {
|
| - cssText = cssText.replace(cssCommentRe, '');
|
| - }
|
| - return cssText;
|
| -}
|
| -
|
| -function cssToRules(cssText) {
|
| - var style = document.createElement('style');
|
| - style.textContent = cssText;
|
| - document.head.appendChild(style);
|
| - var rules = style.sheet.cssRules;
|
| - style.parentNode.removeChild(style);
|
| - return rules;
|
| -}
|
| -
|
| -function rulesToCss(cssRules) {
|
| - for (var i=0, css=[]; i < cssRules.length; i++) {
|
| - css.push(cssRules[i].cssText);
|
| - }
|
| - return css.join('\n\n');
|
| -}
|
| -
|
| -function addCssToDocument(cssText) {
|
| - if (cssText) {
|
| - getSheet().appendChild(document.createTextNode(cssText));
|
| - }
|
| -}
|
| -
|
| -var sheet;
|
| -function getSheet() {
|
| - if (!sheet) {
|
| - sheet = document.createElement("style");
|
| - sheet.setAttribute('ShadowCSSShim', '');
|
| - }
|
| - return sheet;
|
| -}
|
| -
|
| -// add polyfill stylesheet to document
|
| -if (window.ShadowDOMPolyfill) {
|
| - addCssToDocument('style { display: none !important; }\n');
|
| - var head = document.querySelector('head');
|
| - head.insertBefore(getSheet(), head.childNodes[0]);
|
| -}
|
| -
|
| -// exports
|
| -scope.ShadowCSS = ShadowCSS;
|
| -
|
| -})(window.Platform);
|
|
|