css - "safe"Angular 2 自定义 html 标签如何？ (选择器 : Custom tags vs. 自定义属性)

Question

这是一个关于 Angular 2 选择器、自定义标签与自定义属性、搜索引擎优化和浏览器渲染的问题。

当我第一次开始查看 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 元素)我也有服务器端渲染，有两个非常重要的原因:搜索引擎优化 和 快速初始渲染 在应用程序引导之前，向用户提供该网站的初始 View 。否则，您不能拥有非常高流量的 SPA。
当然，无论我使用什么标签，谷歌都会抓取我的网站，但它在两种情况下的排名是否相同:一种是 <custom-make-believe-tags>另一个只有标准的 html 标签？

聊聊 浏览器和 css :

当我开始在 Angular 2 中构建我的第一个 SPA 站点时，我立即面临另一个问题:
说(在非 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>

Angular 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>例如，为了保持这个简单......我要么
A) 将我已经拥有的整个标准 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>

或 :

B) 只放 的内容<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 x 0px。只有它们的内容占据空间。我不明白为什么浏览器仍然按照您想要的方式呈现所有内容，我的意思是在第一种情况下( A ):
同时有float: left; width: 25%;在 div class="video-item" ，但这些 div 中的每一个都是 内 <video-item-component>标签，它没有任何样式……浏览器按照您的预期呈现所有内容，这不是一个幸运的副作用吗？与所有 <div class="video-item">彼此相邻 float ，即使它们都在另一个标签内，<video-item-component>哪个没有 float :左？我已经在 IE10+、Firefox、Chrome 上测试过，一切都很好。是幸运还是对此有可靠的解释，我们可以放心地依赖所有(或至少大多数)浏览器按照我们期望的方式呈现这种标记？

第二种情况( B ):
如果我们直接在自定义标签 ( <video-item-component> ) 上使用类和样式...但据我所知，我们不应该设置自定义组件的样式，对吗？这不也只是一个幸运的预期结果吗？或者这也可以吗？我不知道，也许我还活在 2009 年……是吗？
这两种方法( A 或 B )中的哪一种是推荐的？或者两者都很好？

我没有想法!!

编辑 :
哦，谢谢君特·佐希鲍尔。是的，因为我的 div 有 float: left，这就是为什么它们包裹的(自定义或不自定义)标签不会扩展它的高度。自从我开始查看 Angular 2 以来，似乎我已经忘记了 css 是如何工作的:)
但还有一件事仍然存在:
如果我在块元素上设置百分比宽度(称之为 E)，我会假设它占它的 x% 直系父级 .如果我设置 float: left，我希望在直接父级中 float 。在我的 一个 在这种情况下，由于直接父元素是一个没有显示类型和宽度的自定义标签，我希望事情会以某种方式打破，但仍然......我的 E 元素表现得就像它们的父元素不是它们各自包裹的自定义标签in，但是 dom 中的下一个(在我的例子中是 <div class="video-listing>)。他们占据了其中的 x%，并且漂浮在其中。我不希望这是正常的，我认为这只是一个幸运的效果，恐怕有一天，在浏览器更新后......我会醒来发现我所有的 Angular 2 站点看起来都完全正常 splinter 的。

所以...都是一个 和 乙 同样正确的方法？或者我做错了以防万一一个 ?

编辑2 :
让我们稍微简化一下。当我回答了部分问题时，让我们举另一个生成 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-...>，这些 div 应该向左 float ，每个 div 占据 <footer> 的 50%。令人惊讶的是，一旦它们被包裹在 <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>

请注意，为了简单起见，这里引入了内联样式，实际上我将有一个类，它位于 <head> 中包含的外部 css 文件中。我的文档，不是通过 style或 styleUrls从我的 Angular 组件。

Answer 1

问题在于您的 HTML 验证器。 -元素名称中的元素被视为自定义元素，并且它是有效的 HTML5。 Angular 不需要 -在元素名称中，但这是一种很好的做法。

检查例如https://www.w3.org/TR/custom-elements/#registering-custom-elements (搜索 x-foo)或 https://w3c.github.io/webcomponents/spec/custom/#custom-elements-custom-tag-example .我确定这个破折号规则是在某处指定的，但无法找到规范。例如，在 Polymer 中需要依赖于元素是否为适当的自定义元素，而这在 Angular 中并不重要。据我所知，唯一的区别是当你查询元素时，你会得到一个 HTMLUnknownElement当-名称中缺少 HTMLElement当它包含 - 时.

另见我几年前问的这个问题 Why does Angular not need a dash in component name

BUT if you take a closer look, by default the custom tags don't occupy any space in the dom. They're 0px by 0px. Only their content occupies space. I just don't get it how come the browser still renders everything as you would want to see it

我不确定我是否理解这个问题。当 Angular 处理模板时，它会动态添加内容。当您在浏览器中看到内容时，它也在 DOM 中可用并且具有实际尺寸。

搜索引擎爬虫能够处理由 JavaScript 生成的页面。如果这还不够，服务器端呈现的页面可以向包含整个 View 的爬虫提供静态 HTML。