angularjs 如何像DIV一样设置自定义元素的样式？

wko9yo5t 于 2023-06-21 发布在 Angular

关注(0)|答案(2)|浏览(129)

我正在寻找一个一致的跨浏览器解决方案，以风格自定义元素，如DIV。（即：重置为DIV样式作为起点）。Chrome似乎将自定义元素视为span。
下面是我使用自定义元素的目的：

对于Restrict: EAngular 方向。
作为指令模板的一部分，这样我就可以使用element.find('custom-element')从指令的链接或控制器函数中选择一个子元素。在构建需要计算子元素尺寸和/或位置的指令时，这有时是必要的。

是否像doing this一样简单：

custom-element {
  display: block;
}

或者，在处理某些浏览器时，我应该注意哪些问题？

angularjs

来源：https://stackoverflow.com/questions/23729749/how-do-you-style-a-custom-element-like-a-div

2条答案

按热度按时间

m1m5dgzv1#

自定义标签是强烈反对那些谁是HTML标准的工作。IE8及更低版本的Internet Explorer默认不支持未知标记，解决方案是添加脚本来创建元素。

<!--[if lt IE 9]>
   <script>
      document.createElement('custom-element');
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

HTML5规定未知标记对于浏览器来说是正确的，但是对于代码检查器来说是错误的。浏览器应该允许它们像浏览器熟悉的标签一样使用CSS进行样式化，并且默认情况下它们是内联元素而不是块。
这样做的目的并不是每个人都创建自己的标签集，这会导致混乱，而是允许在不破坏旧系统的情况下创建新标签。
违反HTML5标准的方式被认为是完全违反，并用于考虑如何改进标准时不能使用标准。
为了完成您正在尝试完成的任务，使用标准，他们添加了数据属性和自定义属性http://html5doctor.com/html5-custom-data-attributes/…

<div customElement="true"></div>

document.querySelectorAll('[customElement]');

这就是人们希望你使用的HTML5标准。
注意customElement=“true”是一种常用的故意违规

赞(0）回复(0）举报 2023-06-21

irlmq6kh2#

最基本的元素是跨度。div是span的块版本。Span是inline，div是block。因此，你是正确的，如果你的自定义元素的样式显示为一个块，它将像一个div。
未设置为显示样式的：块

window.customElements.define("hello-world", class extends HTMLElement {
    constructor() {
        super();
        let text = this.textContent;
        let marginLeft = { num: 2, unit: "em" };
        for (let i = 0; i < parseInt(this.getAttribute("nest-element")) - 1; i++) {
            let divEl = document.createElement("div");
            divEl.textContent = text;
            divEl.style.marginLeft = marginLeft.num + marginLeft.unit;
            marginLeft.num += 2;
            this.appendChild(divEl);
        }
        this.style.border = "1px solid #000";
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <hello-world nest-element="7">This is a custom element.</hello-world>
    </body>
</html>

样式设置为显示：块

window.customElements.define("hello-world", class extends HTMLElement {
    constructor() {
        super();
        let text = this.textContent;
        let marginLeft = { num: 2, unit: "em" };
        for (let i = 0; i < parseInt(this.getAttribute("nest-element")) - 1; i++) {
            let divEl = document.createElement("div");
            divEl.textContent = text;
            divEl.style.marginLeft = marginLeft.num + marginLeft.unit;
            marginLeft.num += 2;
            this.appendChild(divEl);
        }
        this.style.display = "block";
        this.style.border = "1px solid #000";
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <hello-world nest-element="7">This is a custom element.</hello-world>
    </body>
</html>

赞(0）回复(0）举报 2023-06-21

我来回答

angularjs 如何像DIV一样设置自定义元素的样式？

2条答案

相关问题

热门标签

最新问答