[1.0.7] Setting a :host style on a extended native component does not work in FF #2118

Xaratas · 2015-07-19T21:40:47Z

Problem:
The :host style is only visible in Chrome, on Firefox (39) it is completely missing.
Seen on Polymer version 1.0.7

Expected Behavior:
FF applies the :host style too

Testcase html file and element extending select

<!DOCTYPE html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="./betterselect-element.html">
        <script>
             document.addEventListener('WebComponentsReady', function() {
                document.getElementsByTagName('body')[0].appendChild(new BetterSelect(["PlayAll", "PlayLoop", "PlayRandom"], "PlayRandom"));
             });
        </script>

    </head>
    <body>
        Test :host style on extended native select, border is visible on Chrome, but not there on ff
    </body>
</html>

<dom-module id="betterSelect-element">
    <style>
        :host {
            border: 10px solid orange;
            max-width: inherit;
        }
    </style>
    <template>
        <template is="dom-repeat" items="{{options_}}">
            <option>{{item}}</option>
        </template>
    </template>
</dom-module>
<script>
"use strict";
    var BetterSelect = new Polymer({
        is: "betterSelect-element",
        extends: "select",

        properties: {
            options_: Array,
            selectedValue: String,
        },

        listeners: {
            'change': 'onChange'
        },

        /** Options is a reserved HtmlOptionsCollection */
        factoryImpl: function(options_, selectedValue) { // label?
            this.options_ = options_;
            this.selectedValue = selectedValue;
            // TODO
        },
        // Das selectbox Verhalten setzt den Wert auf das erste Option das kommt, sprich das muss korrigiert werden.
        attached: function() {
            this.async(function() {
                if(this.value === "") { // delay further, looks like bad style
                    this.async(function() {
                        this.value = this.selectedValue;
                    });
                } else {
                    this.value = this.selectedValue;
                }
            });
        },

        onChange: function() {
            this.fire('value-changed', {value: this.value});
        }
    });
</script>

sorvell · 2015-07-23T17:01:33Z

The problem here is the mixed case in the element definition (betterSelect-element). If you use all lowercase, the problem should be resolved.

We'll likely correct this by forcing element definitions for to be all lowercase.

Fixes #2118: force element `is` to be lowercase: mixing case causes c…

kevinpschaaf added the p1 label Jul 20, 2015

kevinpschaaf assigned sorvell Jul 20, 2015

sorvell closed this as completed in c8905f9 Jul 24, 2015

kevinpschaaf added a commit that referenced this issue Jul 24, 2015

Merge pull request #2141 from Polymer/fix-2118

bb63432

Fixes #2118: force element `is` to be lowercase: mixing case causes c…

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1.0.7] Setting a :host style on a extended native component does not work in FF #2118

[1.0.7] Setting a :host style on a extended native component does not work in FF #2118

Xaratas commented Jul 19, 2015

sorvell commented Jul 23, 2015

[1.0.7] Setting a :host style on a extended native component does not work in FF #2118

[1.0.7] Setting a :host style on a extended native component does not work in FF #2118

Comments

Xaratas commented Jul 19, 2015

sorvell commented Jul 23, 2015