webcomponents / webcomponents/polyfills

_element property on Custom Components breaks CSS Custom Properties

Open
#245 3 comments 0 reactions 0 assignees View on GitHub
Focus Area: Standards & Polyfills Type: Bug wontfix
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.