Multiple CSS selectors separated by commas don't work #3960

notwaldorf · 2016-09-16T07:31:01Z

If I have this in a <dom-module id="paper-material"><template><style> element:

.paper-material([elevation="1"]), .paper-material.elevation-1 {
  color: red;
}

Then this style doesn't apply on a div class="paper-material elevation-1. If I split the comma separated selector into 2 separate ones, then everything is fine.

The text was updated successfully, but these errors were encountered:

dgabrielli76 · 2016-09-16T07:37:09Z

You are right, I have the same problem with mixins. The style is apply only on the first mixin.

notwaldorf · 2016-09-20T21:37:16Z

/cc @azakus

notwaldorf · 2016-09-21T18:35:33Z

I think I was holding this selector wrong. TIL if any of the selectors are wrong in a comma separated list of selectors, everything is borked. Closing!

dfreedm · 2016-09-21T18:38:04Z

There are a few specific cases where Polymer makes this hard in the 1.x -> 2.x transition, which are issues #3924 and webcomponents/shadycss#10

jfrazzano · 2016-09-28T03:40:50Z

this worked for me when updating a few thousand gridboxes on three
different routed pages, and updating changes to indexed db, firebase, and
outside js prototyped datahandler, will send the related behavior next if
anyone is interested. Essentially, have a contextual mediator that injects
css into the cssText field, you parse out what you want gone add what you
want to add. Performance way better, the only consistent cross browser way
I could manage to impliment a context styles menu on a self resizing,
computation heavy grid.

Maybe not polymer spec... but the message since IO has been clear,
Polymer is here to help, the developers there are fighting hard for a more
dynamic work space for all of us, we have to help. If anyone wants anything
along this line,. its cool I will let you just pick and choose. Its about
8000 elements from over the last year.

We are going to straight vanilla. Polymer though, was-- at least for me--
my full education and implementation mentor, guide and sensai... You guys
moved the world forward, or at least the folks over here at Focused. Thank
you... Anything we can do to help, just insinuate...it will be clue enough

chunkMutationForMultiDimensionalArrays(array,property, fullvalue, this){
var keys=array[0][0].key.split("");
var cellClass="." + keys[0];
console.log(nodeList);
var nodeList=document.querrySelectorAll(cellClass);
var counter=nodeList.length;
var p=0;
for(p=0;p<counter; p++)
{
cell=nodeList[p];
if(cell.style.match(property))
{
var replacer= new
RegExp('(('+property+')+(\w|\s_|:)+(\w|\s|-|#)+(;|(\w|\s|\b)+;|\b))+','g');
cell.style=cell.style.replace(replacer, "");
}
var cellStyle=cell.style+fullVal + " ";
cell.style =cellStyle;
var model=elem._templateInstance;
model.set("item.style",cellStyle);
this[mapName].set(newKey,[cell.value, cell]);
this.updateObjectStores(arrayName, 1, newKey, "style",
cellStyle);
}
},
console.log(nodeList);

        var  newArray=this[arrayName].map(function(value, index){
                if(index!=0){
                return value.map(function(cell, m, arr){
                    if(m!==0)
                    {
                        if(cell.style.match(property))
                        {
                          var replacer= new

RegExp('(('+property+')+(\w_|\s_|:)+(\w|\s|-|#)+(;|(\w|\s|\b)+;|\b))+','g');
cell.style=cell.style.replace(replacer, "");

                        }
                      var cellStyle=cell.style+fullVal  + " ";
                      cell.style =cellStyle;
                      var newKey= cell.id;
                      var theId="#"+newKey, elem=this.$$(theId);
                      var model=elem._templateInstance;
                      model.set("item.style",cellStyle);
                      this[mapName].set(newKey,[cell.value, cell]);
                      this.updateObjectStores(arrayName, 1, newKey,

"style", cellStyle);
}
return cell;
},this);
}
return value;},this);

On Wed, Sep 21, 2016 at 2:38 PM, Daniel Freedman notifications@github.com
wrote:

There are a few specific cases where Polymer makes this hard in the 1.x ->
2.x transition, which are issues #3924
#3924 and
webcomponents/shadycss#10
webcomponents/shadycss#10

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#3960 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHxnviKYvGkbPaG1KrVz7uBgcLVwzItRks5qsXmsgaJpZM4J-qkH
.

Jason C. Frazzano Esq.
Founder and Master Coach, Focused Coaching
Stanford University, B.A. M.A., with honors and distinction
Columbia Law School, J.D., Stone Scholar
www.focusedcoaching.com
jason@focusedcoaching.com
jfrazzano@gmail.com
office: 732-671-1834

jfrazzano · 2016-09-28T03:48:06Z

Can I just send this way? It seems obnoxious... but the stuff works and is
adaptable and solves the problem in the standard that was, so my take is
anyone wants the work, take it... that's why we all are here.

Gimme advice on protocol... I only been coding a bit, and always felt
embarrassed to like push my stuff, but this problem I know we had.. there
are a lot of work arounds in like straight js, even old DOM standards stuff
if you'll regExp, // | $${item.superItem}, or just use a queryable dom
string (anchor tag on string proto is last sorta left from dom 1, and you
can more or less just affect the dom as much as you like... you can even
store your stringish elements in a map and just change them, since they are
objects not primitives, same pointer... change the map, change the dom...

here is the behavior

sorry if its annoying, will stop... I just spent months silent on similar
was dumb not to ask, you guys always help

On Tue, Sep 27, 2016 at 11:40 PM, Jason Frazzano jfrazzano@gmail.com
wrote:

this worked for me when updating a few thousand gridboxes on three
different routed pages, and updating changes to indexed db, firebase, and
outside js prototyped datahandler, will send the related behavior next if
anyone is interested. Essentially, have a contextual mediator that injects
css into the cssText field, you parse out what you want gone add what you
want to add. Performance way better, the only consistent cross browser way
I could manage to impliment a context styles menu on a self resizing,
computation heavy grid.

Maybe not polymer spec... but the message since IO has been clear,
Polymer is here to help, the developers there are fighting hard for a more
dynamic work space for all of us, we have to help. If anyone wants anything
along this line,. its cool I will let you just pick and choose. Its about
8000 elements from over the last year.

We are going to straight vanilla. Polymer though, was-- at least for me--
my full education and implementation mentor, guide and sensai... You guys
moved the world forward, or at least the folks over here at Focused. Thank
you... Anything we can do to help, just insinuate...it will be clue enough

chunkMutationForMultiDimensionalArrays(array,property, fullvalue, this){
var keys=array[0][0].key.split("");
var cellClass="." + keys[0];
console.log(nodeList);
var nodeList=document.querrySelectorAll(cellClass);
var counter=nodeList.length;
var p=0;
for(p=0;p<counter; p++)
{
cell=nodeList[p];
if(cell.style.match(property))
{
var replacer= new RegExp('(('+property+')+(\w|
\s_|:)+(\w|\s|-|#)+(;|(\w|\s|\b)+;|\b))+','g');
cell.style=cell.style.replace(replacer, "");
}
var cellStyle=cell.style+fullVal + " ";
cell.style =cellStyle;
var model=elem._templateInstance;
model.set("item.style",cellStyle);
this[mapName].set(newKey,[cell.value, cell]);
this.updateObjectStores(arrayName, 1, newKey, "style",
cellStyle);
}
},
console.log(nodeList);
        var  newArray=this[arrayName].map(function(value, index){
                if(index!=0){
                return value.map(function(cell, m, arr){
                    if(m!==0)
                    {
                        if(cell.style.match(property))
                        {
                          var replacer= new
RegExp('(('+property+')+(\w_|\s_|:)+(\w|\s|-|#)+(;|(
\w|\s|\b)+;|\b))+','g');
cell.style=cell.style.replace(replacer, "");
                        }
                      var cellStyle=cell.style+fullVal  + " ";
                      cell.style =cellStyle;
                      var newKey= cell.id;
                      var theId="#"+newKey, elem=this.$$(theId);
                      var model=elem._templateInstance;
                      model.set("item.style",cellStyle);
                      this[mapName].set(newKey,[cell.value, cell]);
                      this.updateObjectStores(arrayName, 1, newKey,
"style", cellStyle);
}
return cell;
},this);
}
return value;},this);

On Wed, Sep 21, 2016 at 2:38 PM, Daniel Freedman <notifications@github.com

wrote:

There are a few specific cases where Polymer makes this hard in the 1.x
-> 2.x transition, which are issues #3924
#3924 and
webcomponents/shadycss#10
webcomponents/shadycss#10

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#3960 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHxnviKYvGkbPaG1KrVz7uBgcLVwzItRks5qsXmsgaJpZM4J-qkH
.

Jason C. Frazzano Esq.
Founder and Master Coach, Focused Coaching
Stanford University, B.A. M.A., with honors and distinction
Columbia Law School, J.D., Stone Scholar
www.focusedcoaching.com
jason@focusedcoaching.com
jfrazzano@gmail.com
office: 732-671-1834

Jason C. Frazzano Esq.
Founder and Master Coach, Focused Coaching
Stanford University, B.A. M.A., with honors and distinction
Columbia Law School, J.D., Stone Scholar
www.focusedcoaching.com
jason@focusedcoaching.com
jfrazzano@gmail.com
office: 732-671-1834

notwaldorf closed this as completed Sep 21, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple CSS selectors separated by commas don't work #3960

Multiple CSS selectors separated by commas don't work #3960

notwaldorf commented Sep 16, 2016

dgabrielli76 commented Sep 16, 2016

notwaldorf commented Sep 20, 2016

notwaldorf commented Sep 21, 2016

dfreedm commented Sep 21, 2016

jfrazzano commented Sep 28, 2016

jfrazzano commented Sep 28, 2016

Multiple CSS selectors separated by commas don't work #3960

Multiple CSS selectors separated by commas don't work #3960

Comments

notwaldorf commented Sep 16, 2016

dgabrielli76 commented Sep 16, 2016

notwaldorf commented Sep 20, 2016

notwaldorf commented Sep 21, 2016

dfreedm commented Sep 21, 2016

jfrazzano commented Sep 28, 2016

jfrazzano commented Sep 28, 2016