css id's on svg no longer working?

[Phil67ago]

This used to work before version 1

var obj=document.querySelector(".prog-bar");
obj.graph.paper.svg.setAttribute('id', failed?'bar-fault':'bar-ok'); 
obj.graph.circle.el.setAttribute('id', failed?'bar-circle-fault':'bar-circle-ok');
obj.graph.sector.el.setAttribute('id', failed?'bar-value-fault' :'bar-value-ok');
obj.graph.text  .el.setAttribute('id', failed?'bar-text-fault':'bar-text-ok');  

css

#bar-circle-fault {   fill: red;  }

Looking into Firefox Inspector, 'svg' elements gets the 'id' correct but there is no 'css' according to the id. 'class' works but not id.

Don't know if I'm doing somthing wrong but I get no red circle. js-circle-progress": "^1.0.0-beta.0",

Also: Notice that doc says 'textFormat' but 'text-format' is needed. <circle-progress text-format="percent"></circle-progress>

[tigrr]

graph and its elements are component internals. You shouldn't query them directly.

The elements inside circle progress are now in shadow DOM. This has the benefit of isolating them from the outer document DOM. In particular, CSS doesn't penetrate the shadow DOM (except a few inheritable properties such as font properties and color).

Also, at least from your code, I don't see the necessity to add an ID on every SVG element.

You should use CSS ::part() selector to style the individual elements. Here is how you can do it:

var obj=document.querySelector(".prog-bar");
obj.classList.remove('fault', 'ok'); 
obj.classList.add(failed ? 'fault' : 'ok'); 

And in CSS:

.prog-bar.fault::part(circle) {
    fill: red;
}

textFormat is the property name, text-format is the corresponding attribute name. Thank you for noticing this, I will update the docs.

[Phil67ago]

Hi!! Now I'm back on track, Thanks!! I see the meaning of ::part now. Quite handy! /Good work!