{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/613","repository_url":"https://api.github.com/repos/w3c/webcomponents","labels_url":"https://api.github.com/repos/w3c/webcomponents/issues/613/labels{/name}","comments_url":"https://api.github.com/repos/w3c/webcomponents/issues/613/comments","events_url":"https://api.github.com/repos/w3c/webcomponents/issues/613/events","html_url":"https://github.com/w3c/webcomponents/issues/613","id":192941959,"number":613,"title":"defining and instantiating customized built‐in elements as if they were autonomous custom elements","user":{"login":"Zambonifofex","id":12286722,"avatar_url":"https://avatars.githubusercontent.com/u/12286722?v=3","gravatar_id":"","url":"https://api.github.com/users/Zambonifofex","html_url":"https://github.com/Zambonifofex","followers_url":"https://api.github.com/users/Zambonifofex/followers","following_url":"https://api.github.com/users/Zambonifofex/following{/other_user}","gists_url":"https://api.github.com/users/Zambonifofex/gists{/gist_id}","starred_url":"https://api.github.com/users/Zambonifofex/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Zambonifofex/subscriptions","organizations_url":"https://api.github.com/users/Zambonifofex/orgs","repos_url":"https://api.github.com/users/Zambonifofex/repos","events_url":"https://api.github.com/users/Zambonifofex/events{/privacy}","received_events_url":"https://api.github.com/users/Zambonifofex/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-12-01T19:39:28Z","updated_at":"2016-12-04T18:52:31Z","closed_at":null,"body":"I think that a lot of people from #509 (at least @WebReflection, @trusktr, @oleersoy, the 14 people who upvoted the OP at the time of writing, and I) seem to agree that, even if it’s not ultimately bad, the `is` attribute doesn’t feel very natural, and isn’t very DRY. Even everyone who rejected the @trusktr’s original idea seemed to at least admit that `is` is not perfect.\r\n\r\nThere, as a less drastic option, I proposed that customized built‐in elements should be instantiated like autonomous custom elements, and at least @WebReflection thought it was a good idea.\r\n\r\nHere I’m proposing that customized built‐in elements should be ***defined and*** instantiated like autonomous custom elements.\r\n\r\nThere are plans to give every native HTML element their own class. Then, the fact that the class used to define the custom element extends a native element’s class should be enough information that the element should be a customized built‐in element, and not an autonomous custom element:\r\n\r\n```Javascript\r\nclass PlasticButton extends HTMLButtonElement {\r\n  constructor() {\r\n    super();\r\n\r\n    this.addEventListener(\"click\", () => {\r\n      // Draw some fancy animation effects!\r\n    });\r\n  }\r\n}\r\n\r\ncustomElements.define(\"plastic-button\", PlasticButton /*, { extends: \"button\" }*/);\r\n```\r\n\r\nAdditionally, the fact that the element has been defined as a customized built‐in element should be enough information that, when created, it should be a customized built‐in element:\r\n\r\n```Javascript\r\nlet plasticButton = document.createElement(\"plastic-button\");\r\nconsole.log(plasticButton.localName);          // will output \"button\"\r\nconsole.log(plasticButton.getAttribute(\"is\")); // will output \"plastic-button\"\r\n```\r\n\r\nCons:\r\n\r\n* It might not be clear from the `createElement` call that `plasticButton.localName` will be just `\"button\"`. This issue would practically be inexistent in the real world, though, as development tools allow you to inspect the document tree, allowing you to clearly see the element’s tag name."},"comment":{"url":"https://api.github.com/repos/w3c/webcomponents/issues/comments/264722545","html_url":"https://github.com/w3c/webcomponents/issues/613#issuecomment-264722545","issue_url":"https://api.github.com/repos/w3c/webcomponents/issues/613","id":264722545,"user":{"login":"trusktr","id":297678,"avatar_url":"https://avatars.githubusercontent.com/u/297678?v=3","gravatar_id":"","url":"https://api.github.com/users/trusktr","html_url":"https://github.com/trusktr","followers_url":"https://api.github.com/users/trusktr/followers","following_url":"https://api.github.com/users/trusktr/following{/other_user}","gists_url":"https://api.github.com/users/trusktr/gists{/gist_id}","starred_url":"https://api.github.com/users/trusktr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trusktr/subscriptions","organizations_url":"https://api.github.com/users/trusktr/orgs","repos_url":"https://api.github.com/users/trusktr/repos","events_url":"https://api.github.com/users/trusktr/events{/privacy}","received_events_url":"https://api.github.com/users/trusktr/received_events","type":"User","site_admin":false},"created_at":"2016-12-04T18:52:31Z","updated_at":"2016-12-04T18:52:31Z","body":"I feel like https://github.com/w3c/webcomponents/issues/509#issuecomment-264720715 is easier to understand, and in that case your example following that pattern would be:\r\n\r\n```js\r\nlet plasticButton = document.createElement(\"plastic-button\");\r\nconsole.log(plasticButton.localName);          // will output \"plastic-button\"\r\nconsole.log(plasticButton.getAttribute(\"is\")); // will output \"button\"\r\n```\r\n\r\nIt would be great if this pattern would hold for all of customized built-in elements (custom classes that extend from built-in classes), built-in elements, and autonomous custom elements (custom classes that don't extend from built-in classes).\r\n\r\nIt would also be super if `is=\"\"` (or `extends=\"\"`) would accept customized built-in element names or autonomous custom element names, not just built-in element names."}}
{"actor":{"display_login":"trusktr"}}