Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic support for host-context #1895

Closed
wants to merge 1 commit into from
Closed

Basic support for host-context #1895

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions src/lib/style-transformer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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);
},
Expand Down Expand Up @@ -86,7 +86,7 @@
.replace(scope, ''));
}
} else {
element.setAttribute(CLASS, c + (c ? ' ' : '') +
element.setAttribute(CLASS, c + (c ? ' ' : '') +
SCOPE_NAME + ' ' + scope);
}
}
Expand Down Expand Up @@ -164,7 +164,7 @@
stop = true;
}
c = o.combinator;
s = o.value;
s = o.value;
} else {
s = s.replace(SCOPE_JUMP, ' ');
}
Expand All @@ -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;
Expand All @@ -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.
Expand Down Expand Up @@ -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 = '.';
Expand Down