Angular 2自定义html标签的安全性如何？(选择器:自定义标签与自定义属性)

Question

这是关于Angular 2选择器,自定义标签与自定义属性,SEO和浏览器呈现的问题.

当我第一次开始查看Angular 2时,我在跟随他们的快速启动时做的第一件事,即蝙蝠的权利,就是将我的选择器更改为'[my-component]'(属性选择器)而不是'my-component'(标签选择器),所以我可以<div my-component></div>在我的html中而不是<my-component></my-component>,这是无效的HTML.所以我会根据标准写html.好吧,至少非常接近标准(因为my-component它不是一个有效的html属性,但我只能接受那个html验证错误)

然后,在youtube上的某个视频中,角色团队的某个人提到我们应该使用标签选择器,至少在性能方面.

好吧我说,螺旋html验证......或者不应该我？
所以:

1. 假设我忽略了W3C尖叫我的html完全无效,因为<custom-tags>.我实际上有另一个更大更真实的问题:这对SEO有何影响？
   我的意思是不要只考虑客户端应用程序,因为在现实世界中(以及我的角度2项目)我也有服务器端渲染,因为2个非常重要的原因:SEO和快速初始渲染网站到应用程序引导之前的初始视图的用户.否则你不能拥有非常高的交通SPA.
   当然,谷歌将抓取我的网站,无论我使用哪个标签,但它会在两种情况下对它进行排名:一个与<custom-make-believe-tags>另一个只有标准的html标签？

2. 我们来谈谈浏览器和CSS:

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

现在,我有两个选择.让我们<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"在组件标签上添加所需的class()样式,结果如下:

<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.只有他们的内容占据空间.我不明白它是怎么来的浏览器仍然呈现的一切,你会希望看到它,我的意思是在第一种情况(一):
虽然有float: left; width: 25%;上div class="video-item",但每个这些div的是内一个<video-item-component>标签,这不有任何造型......这不是一个幸运的副作用,浏览器呈现你所期望的一切吗？所有<div class="video-item">浮动在彼此旁边,即使它们都在另一个标签内,<video-item-component>它也没有浮动:左边？我已经在IE10 +,Firefox,Chrome上测试过,都很好.它是幸运的还是有一个可靠的解释,我们可以安全地依赖这种标记来呈现所有(或至少大多数)浏览器我们期望的？

第二种情况(B):
如果我们<video-item-component>再次在自定义标签()上使用类和样式,那么一切都很好.但据我所知,我们不应该定制自定义组件,对吧？这不仅仅是一个幸运的预期结果吗？或者这也没关系？我不知道,也许我还活着在2009年......我呢？
推荐的这两种方法中的哪一种(A或B)？或者两者都很好？

我没有想法!!

编辑:
噢,谢谢GünterZöchbauer.是的,因为我的div有浮动:左,这就是为什么他们被包裹的(自定义或非自定义)标签不会扩展它的高度.似乎我已经忘记了自从我开始查看Angular 2后css是如何工作的:)
但是还有一件事情仍然存在:
如果我在块元素上设置一个百分比宽度(称之为E),我认为它需要x%的立即父母.如果我设置float:left,我会期望在直接父级中浮动.在我的案例中,由于直接父级是一个没有显示类型且没有宽度的自定义标签,我希望某些东西能以某种方式破坏,但仍然......我的E元素表现得像他们的父级不是自定义标签他们'每个包裹,但在dom中的下一个(<div class="video-listing>在我的情况下).而且他们占据了x%,他们在那里漂浮.我不认为这是正常的,我认为这只是一个幸运的效果,我担心有一天,在浏览器更新后......我会醒来发现我所有的Angular 2网站完全看起来破碎.

那么...... A和B都是同样合适的方法吗？或者我在案例A中做错了吗？

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-...>,那些div应该向左浮动,每个占据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从我的角度分量.

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 -自定义标签示例。我确信这个破折号规则是在某处指定的，但无法找到规范。例如，Polymer 中要求元素是正确的自定义元素，而这在 Angular 中并不重要。据我所知，唯一的区别是，当您查询元素时，HTMLUnknownElement如果-名称中缺少 ，您会得到 a ，而HTMLElement当名称中包含 时，您会得到 a -。

另请参阅我几年前问过的这个问题Why does Angular不需要组件名称中的破折号

但如果你仔细观察，默认情况下自定义标签不会占用 dom 中的任何空间。它们是 0 像素 x 0 像素。只有它们的内容占据空间。我只是不明白为什么浏览器仍然按照您想要的方式呈现所有内容

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

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