Basic support for host-context #1895

sshumaker · Jun 17, 2015

Support for transforming a host-context rule inside a custom style block. Example usage:

<dom-module is="foo">
  <style>
    :host-context(.bar) .item {
      background-color: red;
    }
  </style>
  <template>
    <div class="item">Hello</div>
  </template>
</dom-module>

<body>
  <div class="bar">
    <foo></foo>
  </div>
</body>

googlebot · Jun 17, 2015

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project, in which case you'll need to sign a Contributor License Agreement (CLA).

Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
If you signed the CLA as a corporation, please let us know the company's name.

sshumaker · Jun 17, 2015

I signed it!

googlebot · Jun 17, 2015

CLAs look good, thanks!

kevinpschaaf · Jun 25, 2015

Thanks! This was fixed along with some other fixes in #1948.

googlebot added the cla: no label Jun 17, 2015

googlebot added cla: yes and removed cla: no labels Jun 17, 2015

sorvell referenced this pull request Jun 17, 2015
Closed
Add support for :host-context #1900

kevinpschaaf closed this Jun 25, 2015

@@ @@ -19,7 +19,7 @@ @@
          /* Transforms ShadowDOM styling into ShadyDOM styling
-    -     * scoping:
+    +     * scoping:
              * elements in scope get scoping selector class="x-foo-scope"
              * selectors re-written as follows:
@@ @@ -36,13 +36,13 @@ @@
           * ::shadow, /deep/: processed simimlar to ::content
-    -     * :host-context(...): NOT SUPPORTED
+    +     * :host-context(...) -> ...
          */
          var api = {
-    -      // Given a node and scope name, add a scoping class to each node
-    -      // in the tree. This facilitates transforming css into scoped rules.
+    +      // Given a node and scope name, add a scoping class to each node
+    +      // in the tree. This facilitates transforming css into scoped rules.
            dom: function(node, scope, useAttr, shouldRemoveScope) {
              this._transformDom(node, scope || '', useAttr, shouldRemoveScope);
            },
@@ @@ -86,7 +86,7 @@ @@
                          .replace(scope, ''));
                      }
                    } else {
-    -                element.setAttribute(CLASS, c + (c ? ' ' : '') +
+    +                element.setAttribute(CLASS, c + (c ? ' ' : '') +
                        SCOPE_NAME + ' ' + scope);
                    }
                  }
@@ @@ -164,7 +164,7 @@ @@
                    stop = true;
                  }
                  c = o.combinator;
-    -            s = o.value;
+    +            s = o.value;
                } else {
                  s = s.replace(SCOPE_JUMP, ' ');
                }
@@ @@ -176,7 +176,12 @@ @@
            _transformCompoundSelector: function(selector, combinator, scope, hostScope) {
              // replace :host with host scoping class
              var jumpIndex = selector.search(SCOPE_JUMP);
-    -        if (selector.indexOf(HOST) >=0) {
+    +        if (selector.indexOf(HOST_CONTEXT) >=0) {
+    +          // :host-context(X) -> X
+    +          selector = selector.replace(HOST_CONTEXT_PAREN, function(m, host, paren) {
+    +            return paren;
+    +          });
+    +        } else if (selector.indexOf(HOST) >=0) {
                // :host(...)
                selector = selector.replace(HOST_PAREN, function(m, host, paren) {
                  return hostScope + paren;
@@ @@ -185,7 +190,7 @@ @@
                selector = selector.replace(HOST, hostScope);
              // replace other selectors with scoping class
              } else if (jumpIndex !== 0) {
-    -          selector = scope ? this._transformSimpleSelector(selector, scope) :
+    +          selector = scope ? this._transformSimpleSelector(selector, scope) :
                  selector;
              }
              // remove left-side combinator when dealing with ::content.
@@ @@ -233,16 +238,18 @@ @@
          };
          var SCOPE_NAME = api.SCOPE_NAME;
-    -    var SCOPE_DOC_SELECTOR = ':not([' + SCOPE_NAME + '])' +
+    +    var SCOPE_DOC_SELECTOR = ':not([' + SCOPE_NAME + '])' +
            ':not(.' + SCOPE_NAME + ')';
          var COMPLEX_SELECTOR_SEP = ',';
          var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)([^\s>+~]+)/g;
          var HOST = ':host';
          var ROOT = ':root';
-    -    // NOTE: this supports 1 nested () pair for things like
+    +    // NOTE: this supports 1 nested () pair for things like
          // :host(:not([selected]), more general support requires
          // parsing which seems like overkill
          var HOST_PAREN = /(\:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
+    +    var HOST_CONTEXT = ':host-context';
+    +    var HOST_CONTEXT_PAREN = /(\:host-context)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
          var CONTENT = '::content';
          var SCOPE_JUMP = /\:\:content|\:\:shadow|\/deep\//;
          var CSS_CLASS_PREFIX = '.';

Polymer/polymer

Basic support for host-context #1895

Labels

Milestone

Assignee

3 participants

Add support for :host-context #1900

Polymer/polymer

Basic support for host-context #1895

Labels

Milestone

Assignee

3 participants

Some checks were not successful

Add support for :host-context #1900

Some checks were not successful