代码之家  ›  专栏  ›  技术社区  ›  vitaly-t

HTML自定义属性优先级

  •  2
  • vitaly-t  · 技术社区  · 6 年前

    我还没有找到,是否 data- 属性应被视为主要语法或次要语法。

    也许是关于一些主要的框架,比如角的?

    也就是说,如果有人将一个属性同时指定为 my-attr data-my-attr ,应该先使用哪一个?我在任何地方都找不到文件。

    <div my-attr="123" data-my-attr="456"></div>
    

    如果我们遇到这样的情况,处理它的标准逻辑是什么?在这种情况下,使用哪个值,忽略哪个值?


    一点背景。我写了一个图书馆 我的属性 语法,后来我扩展到支持 数据我的属性 为了遵从性,我添加了它作为第二语法,这是我不确定的。

    2 回复  |  直到 6 年前
        1
  •  4
  •   colxi    6 年前

    不带 data- 应考虑前缀 无效的 ,因为不遵循标准并且不符合HTML验证程序。

    属性 -data 前缀应具有优先级 ,考虑到它们是HTML兼容的。

    自定义数据属性

    自定义数据属性是没有命名空间的属性 其名称以字符串“data-”开头,连字符后至少有一个字符 ,与XML兼容,不包含U+0041到U+005A(拉丁文大写字母A到拉丁文大写字母Z)范围内的字符。

    资料来源: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes


    测试提供的示例

    如果你去 https://validator.w3.org 测试你的示例代码。。。

    <div my-attr="123" data-my-attr="456"></div>
    

    你会得到这个:

    错误:此时元素div上不允许使用属性my attr。

        2
  •  1
  •   Vikasdeep Singh    6 年前

    根据我对安格拉的理解, 两者都有同等的优先权 . 和 两者不能同时使用 . 你必须选择 my-attr data-my-attr .

    <div ng-model="model.first" data-ng-model="model.second">
    

    以上将通过编译时错误 Error: [$compile:multidir]

    所以你不能一起使用 .

    docs 有一个例子清楚地说明了这一点。

    有效 :

    Hello <input ng-model='name'>
    Hello <input data-ng-model='name'>
    

    无效的 :(错误:[$compile:multidir])

    Hello <input ng-model='name' data-ng-model='name'>
    

    Plunker Demo here .