{"action":"created","issue":{"url":"https://api.github.com/repos/ionic-team/stencil/issues/589","repository_url":"https://api.github.com/repos/ionic-team/stencil","labels_url":"https://api.github.com/repos/ionic-team/stencil/issues/589/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/stencil/issues/589/comments","events_url":"https://api.github.com/repos/ionic-team/stencil/issues/589/events","html_url":"https://github.com/ionic-team/stencil/issues/589","id":301860500,"number":589,"title":"Style missing in header with scoped css ","user":{"login":"sebastien-yoobic","id":35994916,"avatar_url":"https://avatars3.githubusercontent.com/u/35994916?v=4","gravatar_id":"","url":"https://api.github.com/users/sebastien-yoobic","html_url":"https://github.com/sebastien-yoobic","followers_url":"https://api.github.com/users/sebastien-yoobic/followers","following_url":"https://api.github.com/users/sebastien-yoobic/following{/other_user}","gists_url":"https://api.github.com/users/sebastien-yoobic/gists{/gist_id}","starred_url":"https://api.github.com/users/sebastien-yoobic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebastien-yoobic/subscriptions","organizations_url":"https://api.github.com/users/sebastien-yoobic/orgs","repos_url":"https://api.github.com/users/sebastien-yoobic/repos","events_url":"https://api.github.com/users/sebastien-yoobic/events{/privacy}","received_events_url":"https://api.github.com/users/sebastien-yoobic/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-02T18:26:06Z","updated_at":"2018-03-03T00:09:57Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nNOTE:\r\nBefore submitting an issue, please consult our docs -> https://stenciljs.com/\r\n-->\r\n\r\n**Stencil version:**\r\n<!-- (run `npm list @stencil/core` from a terminal/cmd prompt and paste output below): -->\r\n```\r\n @stencil/core@<version> \r\n```\r\n`@stencil/core@0.6.16`\r\n\r\n**I'm submitting a:**\r\n<!-- (check one with \"x\") -->\r\n[X ] bug report\r\n[ ] feature request\r\n[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com\r\n\r\n**Current behavior:**\r\nStyle of component missing in the header of the html file \r\n\r\nInstead of the style for scoped attributes I have this:\r\n`<style>/**style-placeholder:yoo-modal:**/</style>`\r\n\r\n**Expected behavior:**\r\n\r\nThe style for scoped attributes is present.\r\n\r\n**Steps to reproduce:**\r\n<!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo\r\n-->\r\nI  created a repo which reproduces the bug here : https://github.com/sebastien-yoobic/stencil-style-bug \r\n\r\n**Related code:**\r\n\r\n\r\n**Other information:**\r\n<!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. -->\r\n\r\nThe bug only appear if I reuse the modal component in an other component.\r\n\r\n```tsx\r\n\r\n@Component({\r\n  tag: 'my-component',\r\n  styleUrl: 'my-component.scss',\r\n  scoped: true\r\n})\r\nexport class MyComponent {\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <my-modal title=\"Modal\"></my-modal> // Bug\r\n         // No bug without the previous line \r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n```\r\n\r\nScoped attributes are presents in the html element in the DOM. Only the style in the header is missing. \r\n\r\nAsk me any question if you need more informations.\r\n\r\nThanks, \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/ionic-team/stencil/issues/comments/370093946","html_url":"https://github.com/ionic-team/stencil/issues/589#issuecomment-370093946","issue_url":"https://api.github.com/repos/ionic-team/stencil/issues/589","id":370093946,"user":{"login":"sebastien-yoobic","id":35994916,"avatar_url":"https://avatars3.githubusercontent.com/u/35994916?v=4","gravatar_id":"","url":"https://api.github.com/users/sebastien-yoobic","html_url":"https://github.com/sebastien-yoobic","followers_url":"https://api.github.com/users/sebastien-yoobic/followers","following_url":"https://api.github.com/users/sebastien-yoobic/following{/other_user}","gists_url":"https://api.github.com/users/sebastien-yoobic/gists{/gist_id}","starred_url":"https://api.github.com/users/sebastien-yoobic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebastien-yoobic/subscriptions","organizations_url":"https://api.github.com/users/sebastien-yoobic/orgs","repos_url":"https://api.github.com/users/sebastien-yoobic/repos","events_url":"https://api.github.com/users/sebastien-yoobic/events{/privacy}","received_events_url":"https://api.github.com/users/sebastien-yoobic/received_events","type":"User","site_admin":false},"created_at":"2018-03-03T00:09:57Z","updated_at":"2018-03-03T00:09:57Z","author_association":"NONE","body":"This seems to be related with the fact that my component is used inside an other component with import. \r\n\r\nIf I delete the import and the generateModal method, the bug is not happening.\r\n\r\nThis is the code of th other component. \r\n\r\n```tsx\r\nimport { Component, Element, State, Method } from '@stencil/core';\r\nimport { ModalEntry, setModalProps } from '../my-modal/my-modal';\r\n\r\n@Component({\r\n    tag: 'my-modal-controller',\r\n    styleUrl: 'my-modal-controller.scss',\r\n    scoped: true\r\n})\r\nexport class ModalControllerComponent {\r\n\r\n    @Element() el: HTMLElement;\r\n\r\n    @State() element: HTMLElement = document.createElement('my-modal');\r\n\r\n    @Method()\r\n    generateModal(props: ModalEntry) {\r\n        let m = document.createElement('my-modal');\r\n        m = setModalProps(m, props);\r\n        this.element = m;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div></div>\r\n        );\r\n\r\n    }\r\n}\r\n```"}}
{"actor":{"display_login":"sebastien-yoobic"}}