{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/framework/issues/210","labels_url":"https://api.github.com/repos/aurelia/framework/issues/210/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/framework/issues/210/comments","events_url":"https://api.github.com/repos/aurelia/framework/issues/210/events","html_url":"https://github.com/aurelia/framework/issues/210","id":107300846,"number":210,"title":"Extending custom elements","user":{"login":"LordZardeck","id":1145989,"avatar_url":"https://avatars.githubusercontent.com/u/1145989?v=3","gravatar_id":"","url":"https://api.github.com/users/LordZardeck","html_url":"https://github.com/LordZardeck","followers_url":"https://api.github.com/users/LordZardeck/followers","following_url":"https://api.github.com/users/LordZardeck/following{/other_user}","gists_url":"https://api.github.com/users/LordZardeck/gists{/gist_id}","starred_url":"https://api.github.com/users/LordZardeck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LordZardeck/subscriptions","organizations_url":"https://api.github.com/users/LordZardeck/orgs","repos_url":"https://api.github.com/users/LordZardeck/repos","events_url":"https://api.github.com/users/LordZardeck/events{/privacy}","received_events_url":"https://api.github.com/users/LordZardeck/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":35,"created_at":"2015-09-19T00:45:44Z","updated_at":"2015-10-17T23:57:56Z","closed_at":"2015-10-13T16:09:09Z","body":"So i’m having a fun issue where I extend a custom element, which then removes the extended custom element. For example. I have a generic “zone” class with the `@customElement` decorator. I then extend this “zone” class with a “deck” class. All my other zones are then no longer available.\r\n\r\n`Zone.js`\r\n```js\r\nimport {customElement, bindable} from 'aurelia-framework';\r\nimport {inject} from 'aurelia-framework';\r\nimport {GameServer} from '../services/game-server.js'\r\n\r\n@inject(GameServer)\r\n@customElement('zone')\r\nexport class Zone {\r\n    @bindable zoneCards: Array<number> = [];\r\n    @bindable zoneId: string;\r\n\r\n    _gameServer: GameServer;\r\n\r\n    constructor(GameServer) {\r\n        this._gameServer = GameServer;\r\n    }\r\n\r\n    attached() {\r\n        console.log('attaching zone:', this.zoneId);\r\n        this._gameServer._serverConnection.on('zone-accept', this._acceptCard.bind(this));\r\n    }\r\n\r\n    _acceptCard(zoneId) {\r\n        console.log('zone-accept event received:', this.zoneId, '-', zoneId);\r\n        if(!this.zoneId || this.zoneId != zoneId) {\r\n            return;\r\n        }\r\n\r\n        console.log('Received card!');\r\n        this.zoneCards.push(Math.random());\r\n    }\r\n}\r\n```\r\n\r\n`Deck.js`\r\n```js\r\nimport {Zone} from './../zone.js'\r\nimport {customElement} from 'aurelia-framework';\r\n\r\n@customElement('deck')\r\nexport class Deck extends Zone {}\r\n```"},"comment":{"url":"https://api.github.com/repos/aurelia/framework/issues/comments/148961756","html_url":"https://github.com/aurelia/framework/issues/210#issuecomment-148961756","issue_url":"https://api.github.com/repos/aurelia/framework/issues/210","id":148961756,"user":{"login":"charlespockert","id":9073518,"avatar_url":"https://avatars.githubusercontent.com/u/9073518?v=3","gravatar_id":"","url":"https://api.github.com/users/charlespockert","html_url":"https://github.com/charlespockert","followers_url":"https://api.github.com/users/charlespockert/followers","following_url":"https://api.github.com/users/charlespockert/following{/other_user}","gists_url":"https://api.github.com/users/charlespockert/gists{/gist_id}","starred_url":"https://api.github.com/users/charlespockert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charlespockert/subscriptions","organizations_url":"https://api.github.com/users/charlespockert/orgs","repos_url":"https://api.github.com/users/charlespockert/repos","events_url":"https://api.github.com/users/charlespockert/events{/privacy}","received_events_url":"https://api.github.com/users/charlespockert/received_events","type":"User","site_admin":false},"created_at":"2015-10-17T23:57:55Z","updated_at":"2015-10-17T23:57:55Z","body":"@EisenbergEffect I suppose you could support full selectors in the `@sync` decorator but only as long as you were happy using a shim to support the `:scope` pseudo-selector (IE doesn't have native support but Chrome and FF do at the moment)\r\n\r\nYou could provide the option of using `node.matches()` or alternatively using `querySelectorAll()` when mutations are tracked and then discard/accept splices by intersecting the matches with the mutations.\r\n\r\nIt might not be as performant as the `node.matches()` code but would give the developer much more control over how child elements were selected - I can see people wanting to nest tab controls and the like and at the moment some scenarios are not achievable\r\n\r\nSo it would look more like:\r\n\r\n```\r\n@sync({ name: \"tabs\", selector: \":scope > tab\" })\r\n```\r\n\r\nEnsuring you only get direct children"}}