Возможно ли унаследоваться, например, от HTMLDivElement стандартным способом и создавать элементы через конструктор?

Question

[Dmitriy Mozgovoy]

Про document.registerElement я осведомлен, но наследование там неудобное и спецификация только draft
А влоб унаследоваться от HTMLElement я так подозреваю невозможно сейчас? Выходит, без полного определения своего элемента со своим уникальным тегом создать расширенный элемент на базе существующего не удастся? Т.е , расширенный элемент с тем же тегом, но который можно создать только из js т.е парсер html браузера не должен спаунить его. Что то нечеловеческие api делают эти разработчики спецификации. Хотелось бы наследоваться как от обычного объекта js, а они палки в колеса ставят... грусть-печалька...=(

try {
           var nativeDiv = new HTMLDivElement(); //Uncaught TypeError: Illegal constructor
           console.log(nativeDiv);

           document.body.appendChild(nativeDiv);
       }catch(err){
           console.error(err);
       }

       var inherit= function (context, Parent) {
           if (typeof Parent!=='function')
               throw new TypeError('given supper class is not constructor!');
           var F = function () {};
           F.prototype = Parent.prototype;
           context.prototype = new F();
           context.prototype.constructor = context;
           context.base = Parent.prototype;
           return context;
       }

       function WidgetElement(){}

       inherit(WidgetElement,HTMLDivElement);

       WidgetElement.prototype.burnTheWorld=function(){/*evil code here*/};

       var custom=new WidgetElement();

       document.body.appendChild(custom); //Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Answer 1

[Назар Мокринский]

и спецификация только draft

Есть полифиллы для достаточно качественной поддержки.

Что то нечеловеческие api делают эти разработчики спецификации. Хотелось бы наследоваться как от обычного объекта js, а они палки в колеса ставят... грусть-печалька...=(

Я присылал исправления в полифиллы, которые поддерживают разработчики из Google, так вот, там столько нюансов возникает при наследовании, что я бы на вашем месте был поосторожнее с такими высказываниями)

В целом - создавайте свой тэг с помощью WebComponents.js, IE10+ работает ОК, использую постоянно уже достаточно давно, по началу были баги, приходилось самому исправлять и отправлять патчи, сейчас всё достаточно стабильно и хорошо кроме случаев когда полифилл в принципе не может обеспечить имитацию функциональности (описано у них в документации, не критично на самом деле).

Comments

[Dmitriy Mozgovoy]

Полифилы спасут от слегка устаревших браузеров, а от изменения API разработчиками никак не спасают. Если измениться API- либо переписывать свой код, либо искать костыль имитации старого API и таскать за собой, чего очень хочется избежать=)
Нюансы возникают, из того что новый костыль исправляет недочеты предыдущего костыля.
Полифилы то совсем другое дело, они имитируют на уровне кода, они ограничены возможностями среды. Но кто мешал разработчикам на уровне движка перед выпуском html5 выпустить новую версию DOM, и дать выбирать режим совместимости со скрипта на переходное время? Хотя не пойму что им там так мешает сделать прозрачное прототипное наследование, все таки html5 выходит по большей части.
ИМХО приятнее было бы писать как и с обычными объектами, чтоб легко переделывать старые кодинги:

WidgetElement=function(){
         WidgetElement.base.constructor.apply(this,arguments);
    };

    inherit(WidgetElement, HTMLDivElement);

   WidgetElement.prototype.extend({
          listenTo:function(){}
          ...
   })

   ClockWidget=function(){
      ClockWidget.base.constructor.apply(this,arguments);
  };

   inherit(ClockWidget, WidgetElement);

    var widget=new WidgetElement(); 
    document.registerElement("clock-widget", ClockWidget); //если надо - зарегили, не надо- то с html не создать

Что ж.. пока придется по старой школе - обертка над элементом + MutationObserver =\

[Назар Мокринский]

Дмитрий: Если бы так сделали - выход HTML5 в текущем виде задержался бы ещё на пару лет. В общем ваш вариант будет самым быстрым, так как полифиллы под капотом используют тот же MutationObserver. Посмотрите на Polymer, особенно версию 0.8-0.9 - они как раз и есть простыми обертками над браузерными фичами, и сглаживают несовместимости, интерфейс подобно тому, который вы желаете получить там есть.

[Dmitriy Mozgovoy]

Назар Мокринский: в html5 куча всяких плюшек, которые очень редкие в использовании, в ES6 втулили много того что и так как бы есть, особенно кофейникам, но вот исправить этот старый камень преткновения не рискнули=) будем надеяться- что MutationObserver действительно стал настолько производительнее как говорят. Polymer, наверно, отпадает (много плюшек), скорее чистый полифил document-register-element, хотел просто проапгрейтить свой слегка старый код по работе с визуальными компонентами , надеялся что поправлю и унаследую там от HTMLElement вместо Object и тонну кода обертки можно будет вкинуть, но пока не судьба=)

[Назар Мокринский]

Дмитрий: Как раз не много плюшек, он стал в версии 0.8-0.9 (ветка 0.8-preview в репозитории, файл PRIMER.md) очень модульным, ядро совсем маленькое, а дальше что нужно - то и выбираете, вот реально посмотрите на него, так же они далеко продвинулись в плане производительности, но ещё не все фичи из 0.5 перенесли, да и не все перенесут в итоге (часто из-за производительности).

Answer 2

[Roman Zhak]

Это вовсе не нужно делать, хотя бы потому, что не все браузеры дают доступ к прототипам dom-элементов. Подробнее здесь: stackoverflow.com/questions/1489738/how-to-inherit...

Comments

[Dmitriy Mozgovoy]

Как раз нужно- от костылей 5 годичной давности нужно избавляться. Дам забыл, упомянуть - во внимание старье не берем, т.е только IE9+, т.е исходим из того что доступ к прототипу Element все же есть. Выходит еще одно подтверждение что человеческого наследования до сих пор нет в случае с DOM=( прошло дофига времени, а от костылей надстройки/расширения узла в стиле jquery все еще не избавится...