Нестандартные HTML теги

По спецификации: да, можно, но их имя должно содержать хотя бы один дефис.

Реально: да, можно - браузеры всё съедят. За исключением старых IE, где нужно вызывать document.createElement для всех незнакомых ему тегов, чтобы они не стали самозакрывающимися.

А ещё, можно создавать теги в своих пространствах имён.

Спецификация.

Да, разумеется. http://w3c.github.io/webcomponents/spec/custom/

Вот легковесный полифил document.registerElement для всех актуальных браузеров: https://github.com/WebReflection/document-register-element

Рекомендую его, т.к. сам активно использую в продакшене.

var MyElement = document.registerElement(
  'my-element',
  {
    prototype: Object.create(
      HTMLElement.prototype, {
      createdCallback: {value: function() {
        console.log('here I am ^_^ ');
        console.log('with content: ', this.textContent);
      }},
      attachedCallback: {value: function() {}},
      detachedCallback: {value: function() {}},
      attributeChangedCallback: { value: function(name, previousValue, value ) {}}
    })
  }
);

Кастомные теги повышают семантичность и рекомендуются к применению W3C и Google. Единственная проблема с ними - непрохождение стандартного валидатора.

Проблем со стилями на практике не наблюдал ни разу.

Обратите внимание, что по стандарту, кастомные теги должны содержать в названии черту -, т.е. в вашем случае <my-page>

Можно, но к нему не будут применяться стили в некоторых старых браузерах, тут можно почитать как добавить поддержку, но я бы не советовал выдумывать такие велосипеды