webcomponents / webcomponents/polyfills
_element property on Custom Components breaks CSS Custom Properties
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
### Description
Having a property called _element on a custom component causes an if statement to misbehave when calculating the component's CSS Custom Property values. The end result is that any custom property defined within the component's :host selector will be blanked out in the final output.
The error happens in the [style-properties.js file, at line 372](https://github.com/webcomponents/polyfills/blob/47b51759f666416cb640d375672b11b2ecff1cb4/packages/shadycss/src/style-properties.js#L372):
```js
....
this.whenHostOrRootRule(scope, rule, cssBuild, (info) => {
let element = scope._element || scope; // <---- This if statement will yield the wrong result
if (matchesSelector.call(element, info.selector)) {
...
```
Since the scope variable holds the element itself, and the element has a non-falsy _element property, it's _element property will be assigned to the element variable, and therefore it will never cause a match with the selector being evaluated.
#### Live Demo
I couldn't get my JSBin to work in the time I had since the code needs to be transpiled to work on IE, but let me know if it's an issue and I can try to figure it out.
#### Steps to Reproduce
1. Create a custom element and add a property called _element within its constructor:
```js
class CustomComponent extends HTMLElement {
constructor(){
...
this._element = "Gotcha!";
...
}
}
```
2. Define a style with custom properties within the custom element's DOM:
```html
:host {
--text-color: red;
}
h1 {
color: var(--text-color);
}
Hello world
```
Run the code in IE (or force the browser to use the shim).
#### Expected Results
The h1 element will have a red text.
#### Actual Results
The h1 element's text color remains unchanged. Examining the markup, you will see the element's scoped to have all references to the --text-color variable blanked out.
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Edge
- [ ] Safari
- [x] IE 11
Please let me know if you need any more information!
Contributor guide
Assessment
This issue has not been assessed yet.