css – Angular 2自定义html标签的“安全性”如何？ (选择器：自定义标签与自定义属性)

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

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

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

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

>假设我因为< custom-tags>而忽略了W3C对我的html完全无效的尖叫.我实际上还有另一个更大更真实的问题：这对SEO有何影响？
我的意思是不要只考虑客户端应用程序,因为在现实世界中(以及我的角度2项目)我也有服务器端渲染,因为2个非常重要的原因：SEO和快速初始渲染网站到应用程序引导之前的初始视图的用户.否则你不能拥有非常高的交通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乘以0px.只有他们的内容占据空间.我不知道为什么浏览器仍然呈现所有内容,因为你想看到它,我的意思是在第一种情况下(A)：
浮动时：左;宽度：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中(whithout< angular-component -...&gt ;,这些div应该向左浮动,每个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文件.我的文档,而不是通过我的角度组件的样式或styleUrls.

解决方法

问题是您的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生成的网页.如果这还不够,服务器端呈现的页面可以为包含整个视图的爬网程序提供静态HTML.

css – Angular 2自定义html标签的“安全性”如何？ (选择器：自定义标签与自定义属性)

解决方法

猜你在找的CSS相关文章