{"action":"created","issue":{"url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/868","repository_url":"https://api.github.com/repos/webcomponents/webcomponentsjs","labels_url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/868/labels{/name}","comments_url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/868/comments","events_url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/868/events","html_url":"https://github.com/webcomponents/webcomponentsjs/issues/868","id":274287869,"node_id":"MDU6SXNzdWUyNzQyODc4Njk=","number":868,"title":"Timing issue with wecomponents-loader.js firing event before listeners are ready","user":{"login":"jasmith79","id":7632166,"node_id":"MDQ6VXNlcjc2MzIxNjY=","avatar_url":"https://avatars2.githubusercontent.com/u/7632166?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmith79","html_url":"https://github.com/jasmith79","followers_url":"https://api.github.com/users/jasmith79/followers","following_url":"https://api.github.com/users/jasmith79/following{/other_user}","gists_url":"https://api.github.com/users/jasmith79/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmith79/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmith79/subscriptions","organizations_url":"https://api.github.com/users/jasmith79/orgs","repos_url":"https://api.github.com/users/jasmith79/repos","events_url":"https://api.github.com/users/jasmith79/events{/privacy}","received_events_url":"https://api.github.com/users/jasmith79/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-11-15T20:08:49Z","updated_at":"2018-06-17T14:14:24Z","closed_at":"2018-06-17T14:14:24Z","author_association":"NONE","body":"Trying to do a very simple test element with the polyfill loader.\r\n\r\nMarkup\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, minimum-scale=1.0\">\r\n</head>\r\n<body>\r\n  <script type=\"module\" src=\"./test.js\"></script>\r\n  <script src=\"./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\r\n  <foo-bar data-entry=\"yuckyuck\">\r\n    <span>Yo </span>Whatever\r\n  </foo-bar>\r\n </body>\r\n</html>\r\n```\r\n\r\nJavaScript in `test.js`\r\n\r\n```javascript\r\nclass FooBar extends HTMLElement {\r\n  constructor () {\r\n    console.log(\"constructing\");\r\n    super();\r\n  }\r\n\r\n  connectedCallback () {\r\n    console.log(\"connecting\");\r\n  }\r\n\r\n  disconnectedCallback () {\r\n    console.log(\"disconnecting\");\r\n  }\r\n};\r\n\r\nwindow.addEventListener('WebComponentsReady', e => {\r\n  console.log(\"Ready to componentize\");\r\n  customElements.define('foo-bar', FooBar);\r\n});\r\n```\r\n\r\nIf I use the loader as provided I *always* miss the event on chrome 62 (I realize I don't actually *need* the polyfill for chrome). If I replace the rAF with `setTimeout` of 0 I'm 90% hit in chrome but about roughly 1/10 reloads the event fires too soon and I miss it. Upping the `setTimeout` to 100ms makes my script catch the event 100% of the time but is undesirable from a performance standpoint. I have no trouble catching the event in Firefox (as it's being fired by the loaded polyfill script instead of the loader itself).\r\n\r\nIf I set both scripts to `async defer` I seem to catch the event in chrome every time without fail, but if that is *required* for using this polyfill the docs should mention that fact (even if it is best practice).\r\n "},"comment":{"url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/comments/397881799","html_url":"https://github.com/webcomponents/webcomponentsjs/issues/868#issuecomment-397881799","issue_url":"https://api.github.com/repos/webcomponents/webcomponentsjs/issues/868","id":397881799,"node_id":"MDEyOklzc3VlQ29tbWVudDM5Nzg4MTc5OQ==","user":{"login":"TimvdLippe","id":5948271,"node_id":"MDQ6VXNlcjU5NDgyNzE=","avatar_url":"https://avatars3.githubusercontent.com/u/5948271?v=4","gravatar_id":"","url":"https://api.github.com/users/TimvdLippe","html_url":"https://github.com/TimvdLippe","followers_url":"https://api.github.com/users/TimvdLippe/followers","following_url":"https://api.github.com/users/TimvdLippe/following{/other_user}","gists_url":"https://api.github.com/users/TimvdLippe/gists{/gist_id}","starred_url":"https://api.github.com/users/TimvdLippe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TimvdLippe/subscriptions","organizations_url":"https://api.github.com/users/TimvdLippe/orgs","repos_url":"https://api.github.com/users/TimvdLippe/repos","events_url":"https://api.github.com/users/TimvdLippe/events{/privacy}","received_events_url":"https://api.github.com/users/TimvdLippe/received_events","type":"User","site_admin":false},"created_at":"2018-06-17T14:14:24Z","updated_at":"2018-06-17T14:14:24Z","author_association":"CONTRIBUTOR","body":"Note that module scripts are always deferring (https://jakearchibald.com/2017/es-modules-in-browsers/#defer-by-default) which means you have to enforce the timing between the two. However, that is an ES modules issue and not an issue with the loader. You can defer both scripts to make sure the scripts execute as you expect."}}
{"actor":{"display_login":"TimvdLippe"}}