{"action":"closed","issue":{"url":"https://api.github.com/repos/qmlweb/qmlweb/issues/365","repository_url":"https://api.github.com/repos/qmlweb/qmlweb","labels_url":"https://api.github.com/repos/qmlweb/qmlweb/issues/365/labels{/name}","comments_url":"https://api.github.com/repos/qmlweb/qmlweb/issues/365/comments","events_url":"https://api.github.com/repos/qmlweb/qmlweb/issues/365/events","html_url":"https://github.com/qmlweb/qmlweb/issues/365","id":194167754,"number":365,"title":"Utilize Shadow DOM v1 to isolate QML elements","user":{"login":"ChALkeR","id":291301,"avatar_url":"https://avatars.githubusercontent.com/u/291301?v=3","gravatar_id":"","url":"https://api.github.com/users/ChALkeR","html_url":"https://github.com/ChALkeR","followers_url":"https://api.github.com/users/ChALkeR/followers","following_url":"https://api.github.com/users/ChALkeR/following{/other_user}","gists_url":"https://api.github.com/users/ChALkeR/gists{/gist_id}","starred_url":"https://api.github.com/users/ChALkeR/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ChALkeR/subscriptions","organizations_url":"https://api.github.com/users/ChALkeR/orgs","repos_url":"https://api.github.com/users/ChALkeR/repos","events_url":"https://api.github.com/users/ChALkeR/events{/privacy}","received_events_url":"https://api.github.com/users/ChALkeR/received_events","type":"User","site_admin":false},"labels":[{"id":328722082,"url":"https://api.github.com/repos/qmlweb/qmlweb/labels/discuss","name":"discuss","color":"fef2c0","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/qmlweb/qmlweb/milestones/1","html_url":"https://github.com/qmlweb/qmlweb/milestone/1","labels_url":"https://api.github.com/repos/qmlweb/qmlweb/milestones/1/labels","id":1582678,"number":1,"title":"1.0.0","description":null,"creator":{"login":"ChALkeR","id":291301,"avatar_url":"https://avatars.githubusercontent.com/u/291301?v=3","gravatar_id":"","url":"https://api.github.com/users/ChALkeR","html_url":"https://github.com/ChALkeR","followers_url":"https://api.github.com/users/ChALkeR/followers","following_url":"https://api.github.com/users/ChALkeR/following{/other_user}","gists_url":"https://api.github.com/users/ChALkeR/gists{/gist_id}","starred_url":"https://api.github.com/users/ChALkeR/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ChALkeR/subscriptions","organizations_url":"https://api.github.com/users/ChALkeR/orgs","repos_url":"https://api.github.com/users/ChALkeR/repos","events_url":"https://api.github.com/users/ChALkeR/events{/privacy}","received_events_url":"https://api.github.com/users/ChALkeR/received_events","type":"User","site_admin":false},"open_issues":19,"closed_issues":7,"state":"open","created_at":"2016-02-15T07:58:18Z","updated_at":"2016-12-11T12:48:51Z","due_on":null,"closed_at":null},"comments":0,"created_at":"2016-12-07T20:59:20Z","updated_at":"2016-12-11T12:48:51Z","closed_at":"2016-12-11T12:48:51Z","body":"Shadow DOM v1 is out, and browser vendors seem to have agreed to implement that.\r\n\r\nWe should use Shadow DOM v1, when available, to isolate elements, so that:\r\n * QML child elements won't show up in `.querySelector()` and other DOM queries and won't pollute global tree (so they won't accidentially be affected by the user)\r\n * QML child elements won't be affected by the page CSS.\r\n\r\nThis will still allow easy debugging, as there is a switch in browsers that allows to inspect Shadow DOM contents.\r\n\r\nWhen Shadow DOM is not available (as that depends on browser support), we should keep things in their current state.\r\n\r\nGiven that we will need to support operating both with and without Shadow DOM (to keep browsers support), we might also add a global flag that disables the isolation, if someone would want to keep the old behaviour and style QML child elements with css for some reason.\r\n\r\nRefs:\r\n * https://www.w3.org/TR/shadow-dom/\r\n * https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom\r\n\r\nThe patch against #363 is trivial:\r\n\r\n```diff\r\ndiff --git a/src/engine/CustomElements.js b/src/engine/CustomElements.js\r\nindex aa9230b..e137829 100644\r\n--- a/src/engine/CustomElements.js\r\n+++ b/src/engine/CustomElements.js\r\n@@ -50,7 +50,12 @@ function registerElement(name, file) {\r\n       }\r\n \r\n       const div = document.createElement(\"div\");\r\n-      this.appendChild(div);\r\n+      if (true) { // TODO: check presence and add an opt-out\r\n+        const shadow = this.attachShadow({mode: 'open'});\r\n+        shadow.appendChild(div);\r\n+      } else {\r\n+        this.appendChild(div);\r\n+      }\r\n \r\n       // Initial height, overwritten in QML to computed height\r\n       // TODO: use something smarter than .offsetHeight?\r\n```\r\n\r\nThat introduces Shadow DOM only for child elements, I will think more about current `.loadFile(`/`.loadQML(` methods later.\r\n\r\n/cc @akreuzkamp @Plaristote @stephenmdangelo "}}
{"actor":{"display_login":"ChALkeR"}}