{"action":"created","issue":{"url":"https://api.github.com/repos/Polymer/polymer/issues/4254","repository_url":"https://api.github.com/repos/Polymer/polymer","labels_url":"https://api.github.com/repos/Polymer/polymer/issues/4254/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/polymer/issues/4254/comments","events_url":"https://api.github.com/repos/Polymer/polymer/issues/4254/events","html_url":"https://github.com/Polymer/polymer/issues/4254","id":200102810,"number":4254,"title":"Assigning a mixin will bleed out, only when using native CSS properties","user":{"login":"mercmobily","id":2128734,"avatar_url":"https://avatars.githubusercontent.com/u/2128734?v=3","gravatar_id":"","url":"https://api.github.com/users/mercmobily","html_url":"https://github.com/mercmobily","followers_url":"https://api.github.com/users/mercmobily/followers","following_url":"https://api.github.com/users/mercmobily/following{/other_user}","gists_url":"https://api.github.com/users/mercmobily/gists{/gist_id}","starred_url":"https://api.github.com/users/mercmobily/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mercmobily/subscriptions","organizations_url":"https://api.github.com/users/mercmobily/orgs","repos_url":"https://api.github.com/users/mercmobily/repos","events_url":"https://api.github.com/users/mercmobily/events{/privacy}","received_events_url":"https://api.github.com/users/mercmobily/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2017-01-11T14:09:56Z","updated_at":"2017-01-17T20:29:39Z","closed_at":null,"body":"We are experiencing an issue where setting a mixin within a selector seems to be misbehaving: the value seems to be \"bleeding out\" to other elements that do not match the CSS selector.\r\n\r\nEven more baffling, this only seems to happen by using the custom CSS properties.\r\n\r\nWe recreated a simple tiny repository showing the issue: https://github.com/tegola/polymer-apply-bug-testcase (sorry, it was just way too painful getting this to happen on a CDN).\r\n\r\nThe short story: `<paper-input>` is configurable by changing the mixin `--paper-input-container-input`. So, in `my-app.html`, we do this:\r\n\r\n      /* Add borders and padding, and reduce margin to underline */\r\n        --paper-input-container-input: {\r\n          box-sizing: border-box;\r\n          border: 1px solid var(--paper-grey-400);\r\n          border-bottom: 0;\r\n          padding: 0.5rem;\r\n        };\r\n\r\nThis should set the mixin in the scope of the `<my-app>` element.\r\n`my-app.html` has a PSK-ish:\r\n\r\n      <my-view1 name=\"view1\"></my-view1>\r\n\r\nEnter `my-view.html`. HTML-wise, it just has two elements:\r\n\r\n    <paper-input label=\"Normal input\"></paper-input>\r\n\r\n    <paper-dropdown-menu label=\"Normal dropdown\">\r\n      <paper-listbox class=\"dropdown-content\">\r\n        <paper-item>Item 1</paper-item>\r\n        <paper-item>Item 2</paper-item>\r\n        <paper-item>Item 3</paper-item>\r\n      </paper-listbox>\r\n    </paper-dropdown-menu>\r\n\r\nThe first `<paper-input>` can be configured, like ANY `<paper-input>`, by setting the mixin `--paper-input-container-input`. However, `<paper-dropdown-menu>` ALSO contains internally a `<paper-input>` element. I want *that* `<paper-input>` element to look a little different. So, I write this in the CSS section of `my-view1.html`:\r\n\r\n      /* Input borders in dropdown menus */\r\n      paper-dropdown-menu {\r\n        --paper-input-container-input: {\r\n          box-sizing: border-box;\r\n          padding: 0.5rem;\r\n          border: 1px solid var(--paper-grey-400);\r\n          border-bottom: 0;\r\n          border-right: 0; /* This bleeds out */\r\n          background-color: rgba(255, 0, 0, 0.25); /* This does not */\r\n        };\r\n      }\r\n\r\nThis should (I hope I am right) set the value for the mixin `--paper-input-container-input` as specified, but _only for elements matching the selector `paper-dropdown-menu`_.\r\nSo, the first `<paper-input>` should be untouched.\r\n\r\nAnd yet: \r\n\r\n* Using the custom CSS elements polyfill, it works fine: the normal input has its border.\r\n* Setting `useNativeCSSProperties` to true will show the straight paper input with the missing border on the right\r\n* The issue seems to be there only for the borders. The red transparent background will only happen in `<paper-dropdown-menu>` (as you would expect)\r\n* `<paper-dropdown-menu>` defines the mixin `--paper-input-container-input` like so in `paper-dropdown-menu-shared-styles.html`:\r\n\r\n      --paper-input-container-input: {\r\n          overflow: hidden;\r\n          white-space: nowrap;\r\n          text-overflow: ellipsis;\r\n          max-width: 100%;\r\n          box-sizing: border-box;\r\n          cursor: pointer;\r\n        };\r\nI am not sure this is relevant. I thought I'd add it.\r\n\r\nIs this a bug in the native implementation of native CSS properties? Or am I doing something silly?\r\n\r\nSafari has the same issue when using native CSS properties."},"comment":{"url":"https://api.github.com/repos/Polymer/polymer/issues/comments/273290129","html_url":"https://github.com/Polymer/polymer/issues/4254#issuecomment-273290129","issue_url":"https://api.github.com/repos/Polymer/polymer/issues/4254","id":273290129,"user":{"login":"arthurevans","id":1149422,"avatar_url":"https://avatars.githubusercontent.com/u/1149422?v=3","gravatar_id":"","url":"https://api.github.com/users/arthurevans","html_url":"https://github.com/arthurevans","followers_url":"https://api.github.com/users/arthurevans/followers","following_url":"https://api.github.com/users/arthurevans/following{/other_user}","gists_url":"https://api.github.com/users/arthurevans/gists{/gist_id}","starred_url":"https://api.github.com/users/arthurevans/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arthurevans/subscriptions","organizations_url":"https://api.github.com/users/arthurevans/orgs","repos_url":"https://api.github.com/users/arthurevans/repos","events_url":"https://api.github.com/users/arthurevans/events{/privacy}","received_events_url":"https://api.github.com/users/arthurevans/received_events","type":"User","site_admin":false},"created_at":"2017-01-17T20:29:39Z","updated_at":"2017-01-17T20:29:39Z","body":"Seems like something is probably wrong in the way we rewrite mixins as individual native CSS properties. @azakus, see the fiddle @WoodyWoodsta posted in this comment: https://github.com/Polymer/polymer/issues/4254#issuecomment-272441956 ... If you comment out the styles for the dropdown, the right border shows up on the normal paper-input ... which shouldn't be affected by this change.\r\n\r\nBTW, @mercmobily note that you can work around this specific issue by explicitly declaring `border-right` in both rules. It seems to only happen where you have the shorthand form in one rule (border) overridden by the more specific form in another rule (border-right).\r\n\r\nNonetheless, it seems like a bug to me. Can't see why those rules would apply here.\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"arthurevans"}}