Насколько безопасны теги Angular 2? (селекторы: пользовательские теги и пользовательские атрибуты)

Question

Насколько безопасны теги Angular 2? (селекторы: пользовательские теги и пользовательские атрибуты)

Это вопрос относительно угловых 2 селекторов, пользовательских тегов и пользовательских атрибутов, SEO и рендеринга в браузере.

Когда я впервые начал просматривать Angular 2, самое первое, что я сделал, когда следил за их быстрым стартом, справа от летучей мыши, было изменение моего селектора на '[my-component]' (селектор атрибута) вместо 'my-component' (селектор тегов), чтобы я мог иметь <div my-component></div> в моем HTML вместо <my-component></my-component>, который не является действительным HTML. Поэтому я бы написал HTML в соответствии со стандартами. Ну, по крайней мере, довольно близко к стандартам (потому что my-component не является допустимым атрибутом HTML, но я мог бы жить только с этой ошибкой проверки HTML)

Затем, в какой-то момент в видео на youtube, кто-то из команды разработчиков Angular упомянул, что мы должны использовать селектор тегов, по крайней мере, с точки зрения производительности.

Хорошо, я сказал, винт проверки HTML... или я не должен?
Так:

Скажем, я игнорирую крик W3C о том, что мой html полностью недействителен из-за <custom-tags>, У меня на самом деле есть еще одна большая и более реальная проблема: как это влияет на SEO?
Я имею в виду не только клиентское приложение, потому что в реальном мире (и для моего проекта angular 2) у меня также есть рендеринг на стороне сервера по двум очень важным причинам: SEO и быстрая первоначальная визуализация сайта для пользователь для этого начального представления перед загрузкой приложения. В противном случае вы не можете иметь СПА с очень высоким трафиком.
Конечно, Google будет сканировать мой сайт, независимо от используемых мной тегов, но будет ли он иметь одинаковый рейтинг в обоих сценариях: один с <custom-make-believe-tags> а другой только со стандартными тегами html?
Давайте поговорим о браузерах и CSS:

Когда я начал строить свой первый SPA-сайт в Angular 2, я сразу же столкнулся с другой проблемой:
Скажем, (не на сайте SPA) у меня есть следующая HTML-разметка:

<header>
    <a class="logo">
        ...
    </a>

    <div class="widgets">
        <form class="frm-quicksearch"> ... </form>
        <div class="dropdown">
            <!-- a user dropdown menu here -->
        </div>
    </div>
</header>

<div class="video-listing">
    <div class="video-item"> ... </div>
    <div class="video-item"> ... </div>
    ...
</div>

Для угловых 2 у меня будет следующее дерево компонентов:

<header-component>
    <logo-component></logo-component>
    <widgets-component>
        <quicksearch-component></quicksearch-component>
        <dropdown-component></dropdown-component>
    </widgets-component>
</header-component>

<video-listing-component>
    <video-item-component></video-item-component>
    ...
</video-listing-component>

Теперь у меня есть 2 варианта. Давайте просто возьмем <video-listing-component> например, чтобы сохранить это простым... я либо
А) разместить все стандартные HTML-теги, которые у меня уже есть (<div class="video-item"></div>) в пределах <video-item-component> тег, и после рендеринга приведет к этому:

<video-listing-component>
    <div class="video-listing>
        <video-item-component>
            <div class="video-item>...</div>
        </video-item-component>
        ...
        ...
    </div>
</video-listing-component>

ИЛИ

Б) Только положить содержание <div class="video-item"> прямо в мой <video-item-component> компонент и добавление необходимого класса (class="video-item") для стилизации тега компонента, в результате чего получается что-то вроде этого:

<video-listing-component class="video-listing">
    <video-item-component class="video-item"></video-item-component>
    <video-item-component class="video-item"></video-item-component>
    ...
</video-listing-component>

В любом случае (A или B) браузер отображает все просто отлично.
НО, если вы посмотрите поближе (после того, как все будет отображено в dom, конечно), по умолчанию пользовательские теги не занимают места в dom. Они 0px на 0px. Только их содержание занимает пространство. Я не понимаю, почему браузер по-прежнему отображает все так, как вы бы хотели, я имею в виду в первом случае (A):
Имея float: left; width: 25%; на div class="video-item", но каждый из этих элементов находится внутри <video-item-component> тег, который не имеет никакого стиля... Разве это не просто удачный побочный эффект, что браузер отображает все так, как вы ожидаете? Со всеми <div class="video-item"> плавающий рядом друг с другом, хотя каждый из них находится внутри другого тега, <video-item-component> который НЕ имеет float: left? Я тестировал на IE10+, Firefox, Chrome, все отлично. Это просто повезло или есть веское объяснение этому, и мы можем смело полагаться на то, что этот вид разметки будет отображаться так, как мы ожидали от всех (или, по крайней мере, большинства) браузеров?

Второй случай (B):
Если мы используем классы и стилизацию непосредственно на пользовательских тегах (<video-item-component>)... опять все хорошо показывает. Но, насколько я знаю, мы не должны разрабатывать пользовательские компоненты, верно? Разве это не просто счастливый ожидаемый результат? Или это тоже хорошо? Я не знаю, может быть, я все еще живу в 2009 году... я?
Какой из этих двух подходов (А или В) будет рекомендуемым? Или оба в порядке?

У меня нет идей!

РЕДАКТИРОВАТЬ:
Спасибо, Гюнтер Цохбауэр. Да, поскольку у моих div'ов есть float: left, поэтому тег (пользовательский или нет), в который они помещены, не увеличивает его высоту. Кажется, я забыл, как работает css, так как начал просматривать Angular 2:)
Но остается одна вещь:
Если бы я установил процентную ширину элемента блока (назовите его E), я бы предположил, что он занимает х% от его непосредственного родителя. Если бы я установил float: left, я бы ожидал, что плавающий внутри непосредственного родителя. В моем случае A, поскольку непосредственным родителем является пользовательский тег без типа отображения и ширины, я бы ожидал, что что-то сломается, но все же... мои элементы E ведут себя так, как будто их родитель не является пользовательским тегом каждый завернут, но следующий в дом (который <div class="video-listing> в моем случае). И они занимают х% этого, и они плавают в этом. Я не ожидаю, что это будет нормально, я думаю, что это просто удачный эффект, и я боюсь, что однажды, после некоторого обновления браузера... Я проснусь, чтобы все мои сайты Angular 2 выглядели полностью сломана.

Итак... и A, и B - одинаково правильный подход? Или я делаю это неправильно в случае А?

EDIT2:
Давайте немного упростим вещи. Когда я получил ответ на часть моего вопроса, давайте возьмем другой пример сгенерированного html (немного упрощенного, с встроенным css):

<footer>
    <angular-component-left>
        <div style="float: left; width: 50%;">
            DIV CONTENT
        </div>
    </angular-component-left>
    <angular-component-right>
        <div style="float: left; width: 50%;">
            DIV CONTENT
        </div>
    </angular-component-right>
</footer>

В оригинале пока не реализован html (без <angular-component-...>эти элементы должны плавать влево, и каждый из них должен занимать 50% <footer>, Удивительно, но как только они завернуты в <angular-component-...> Пользовательские теги, они делают то же самое: занимают 50% нижнего колонтитула. Но мне кажется, это просто удача, тупая удача... Непреднамеренный эффект.
Так это или не "тупая удача"?
Если я оставлю это так или перезапишу вместо приведенного выше кода, у меня будет что-то вроде этого:

<footer>
    <angular-component-left style="display: block; float: left; width: 50%;">
        DIV CONTENT
    </angular-component-left>
    <angular-component-right style="display: block; float: left; width: 50%;">
        DIV CONTENT
    </angular-component-right>
</footer>

Обратите внимание, что встроенный стиль введен здесь для простоты, вместо этого я бы использовал класс, который был бы во внешнем CSS-файле, включенном в <head> моего документа, а не через style или же styleUrls из моих угловых компонентов.

8

css angular seo angular2-components html-validation

Источник

user3107662 15 май '16 в 15:48

1 ответ

Другие вопросы по тегам css angular seo angular2-components html-validation

user217408 15 май '16 в 15:51 2016-05-15 15:51 · Answer 1 · 2016-05-15 15:51

Проблема в вашем HTML-валидаторе. - в имени элемента требуется, чтобы элементы рассматривались как пользовательские элементы, и это допустимый HTML5. Угловой не требует - в именах элементов, но это хорошая практика.

Проверьте, например, https://www.w3.org/TR/custom-elements/ (найдите x-foo) или https://w3c.github.io/webcomponents/spec/custom/. Я уверен, что это правило черты указано где-то, но не смог найти спецификацию. Например, в Polymer требуется, чтобы элементы были правильными пользовательскими элементами, а в Angular это не имеет большого значения. Насколько я знаю, единственное отличие состоит в том, что когда вы запрашиваете элемент, вы получаете HTMLUnknownElement когда - отсутствует в имени и HTMLElement когда он содержит -,

См. Также этот вопрос, который я задавал несколько лет назад. Почему Angular не нужна тире в имени компонента?

НО, если вы посмотрите поближе, по умолчанию пользовательские теги не занимают места в dom. Они 0px на 0px. Только их содержание занимает пространство. Я просто не понимаю, почему браузер по-прежнему отображает все так, как вы хотели бы видеть

Я не уверен, что понимаю этот вопрос. Когда Angular обрабатывает шаблон, он добавляет содержимое динамически. Когда вы видите контент в браузере, он также доступен в DOM и имеет реальные размеры.

Сканеры поисковых систем могут обрабатывать страницы, созданные с помощью JavaScript. Если этого недостаточно, страницы, отображаемые на стороне сервера, могут предоставить статический HTML сканерам, которые содержат весь вид.