3

我有一个动态创建div. 除此之外，我还有一个 webcomponent scrollable-div，它是从HTMLDivElement. 由于我无法控制divjQuery 插件是如何创建它的，因此我需要在创建之后以及它已经添加到 DOM 之后对其进行升级。

class myDiv extends HTMLDivElement {
  constructor(...args) {
    const self = super(...args);
    self.addEventListener('click', (e) => {
      e.target.textContent = 'clicked'
    })
    return self;
  }
}

customElements.define('my-div', myDiv, { extends: 'div' });

document.addEventListener('DOMContentLoaded', () => { 
  // this is where I'm trying to turn the div#upgradeMe into a my-div
  upgradeMe.setAttribute('is', 'my-div');
});
<div id="upgradeMe">Click me</div>

简单地添加is="my-div"属性显然不能解决问题，div只是保持常规HTMLDivElement。如何以编程方式将 DOM 中的原生元素升级为自定义的内置 Web 组件？

4

2 回答 2

3

这是不可能的，因为该元素已作为标准元素创建，并且由于缺少该属性而在解析为可升级<div>（可扩展）时未被识别。is

如果自定义元素已经定义，唯一可能的解决方法是用克隆替换现有元素（如@barbsan 的评论中所建议的那样）。

捷径：

  1. 创建一个<template>元素
  2. 将 div 复制outerHTML到其innerHTML属性中
  3. content用模板替换原始元素replaceChild()

class myDiv extends HTMLDivElement {
  constructor(...args) {
    const self = super(...args);
    self.addEventListener('click', (e) => {
      e.target.textContent = 'clicked'
    })
    return self;
  }
}

customElements.define('my-div', myDiv, { extends: 'div' });

document.addEventListener('DOMContentLoaded', () => { 
  // this is where I'm trying to turn the div#upgradeMe into a my-div
  upgradeMe.setAttribute('is', 'my-div');
  var t = document.createElement( 'template' )
  t.innerHTML = upgradeMe.outerHTML
  upgradeMe.parentElement.replaceChild( t.content, upgradeMe )
});
<div id="upgradeMe">Click me</div>

精度

解析元素时，根据 DOM 规范影响is 值：

元素具有关联的命名空间、命名空间前缀、本地名称、自定义元素状态、自定义元素定义、是值。创建元素时，所有这些值都会被初始化。

只有具有有效is属性的元素才被标识为可定制的：

元素的自定义元素状态是“未定义”、“失败”、“未自定义”或“自定义”之一。自定义元素状态为“未自定义”或“自定义”的元素称为已定义。自定义元素状态为“自定义”的元素称为自定义元素。

因此，如果元素在解析时没有is属性，它将无法自定义。这就是为什么您不能在is之后添加该属性。

同样在HTML 规范中：

创建自定义元素后，更改is属性的值不会更改元素的行为，因为它作为其is 值保存在元素上。

该is属性仅在创建元素时（在解析时）用于初始化is 值，如果在创建元素时更改，则该属性无效。从这个意义上说，值是只读的。

于 2018-07-25T21:09:35.587 回答
0

如果您想支持所有现代浏览器，您无法自定义内置组件，Apple 表示他们永远不会支持 is="" https://github.com/w3c/webcomponents/issues/509#issuecomment-222860736

于 2018-07-24T12:51:26.943 回答