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

Xaratas · Jul 19, 2015

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 · Jul 23, 2015

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.

kevinpschaaf added the p1 label Jul 20, 2015

sorvell was assigned by kevinpschaaf Jul 20, 2015

sorvell closed this issue from a commit Jul 24, 2015

sorvell Fixes #2118: force element `is` to be lowercase: mixing case causes c… …
…onfusion and breaks style shimming for type extensions.
c8905f9

sorvell closed this in c8905f9 Jul 24, 2015

Polymer/polymer

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

Labels

Milestone

Assignee

3 participants