标签: custom-element

我正在开发一个使用 HTML 5 本机 Web 组件的 Web 应用程序。我的问题是我有很多用于所有这些的通用 CSS，并且我使用了很棒的字体来制作漂亮的图标。现在我将所有样式都放在“/deep”阴影穿孔中，但 Chrome 说：“/deep/ 组合器已弃用。” 您对如何在整个应用程序上使用全局 CSS 和 CSS 库（如字体真棒）有什么建议吗？

谢谢 ：）

我正在努力扩展HTMLOptionElement,

<template id="cOptionTemplate">
    <content></content>
</template>

<select>
    <option is="custom-option">Test</option>
</select>

var cOption = document.registerElement('custom-option', {
    prototype: Object.create(HTMLOptionElement.prototype, {
        createdCallback: {
            value: function() {
                var template = document.getElementById("cOptionTemplate")
                var clone = document.importNode(template.content, true);
                this.createShadowRoot().appendChild(clone);
            }
        },
        attributeChangedCallback: {
            value: function (attrName, oldVal, newVal){
                switch(attrName){
                    case "attr1":
                        console.log(this);
                }
            }
        }
    }),
    extends: "option"
});

这是代码的演示.

但显然这不起作用,因为它已经有一个用户代理shadowRoot？

未捕获的InvalidStateError:无法在"元素"上执行"createShadowRoot":无法在已托管用户代理影子树的主机上创建影子根.

我从未见过这个错误,我认为它可以让你附加多个阴影根.它为什么会发生,是否有办法让它发挥作用？

我使用过Google api Overlayviews.我能够使用像素值在latlng位置添加带有html div元素的自定义叠加层.

USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
 div.style.height = (sw.y - ne.y) + 'px';
      };

现在我正在使用OpenLayer 3.是否有任何选项可以使用像素值在特定位置添加自定义div元素(如标记).每次放大或缩小地图时,我都可以找到像素位置并更新div元素的顶部和左侧,使其看起来位于正确的位置.在OpenLayer3中是否有任何可能.

问题如下，当我在devtool或js代码中更新attr sticky时，无法触发attributeChangedCallback。滚动和添加和删除粘性属性时，_updateSticky（）方法运行得很好。

class HeaderLogo extends HTMLElement {

static get observedAttribute() {
    return ['alt-logo', 'sticky'];
}

constructor() {
    super();    
}

connectedCallback() {
   this._updateSticky();

    window.addEventListener('scroll', () => {
        this._updateSticky();
    }, false);
}  

attributeChangedCallback(attrName, oldVal, newVal) {    
    console.log("attr changed");    
}

/* evaluates if the logo should be in sticky state or not */
_updateSticky() {
    let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
    let breakpoint = 50;

    if (scrollTop > breakpoint) {
        this.setAttribute('sticky', '');
    } else {
        this.removeAttribute('sticky');
    }
 }
} …

在Clarity Icon文档中,他们表明您可以使用shape属性来设置图标形状,如下所示:

<clr-icon shape="info-circle" size="16"></clr-icon>

在我的角度模板中,我使用了像这样的clr-icon元素:

<clr-icon [shape]="myShape"></clr-icon>

并使用我的组件设置绑定到的形状的字符串值myShape:

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

使用按钮(模板中未显示)我想运行changeShape()动态更改图标的形状但没有发生任何事情,我缺少什么？

创建带有 shadow dom 的自定义元素并设置元素的 innerHTML 时，它不会显示。为什么？有没有办法防止这种情况发生？

//JS代码

export default class VideoPlayer extends DomElement {
   constructor() {
      super();
      const mountPoint = document.createElement('div');
      this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
  }
}
window.customElements.define('video-player', VideoPlayer);

//HTML代码

<video-player>Why is this text hidden?</video-player>

我已按照此处的指南使用纯JS / HTML / CSS创建了一个本地自定义元素作为Web组件。

现在我想知道如何为这种组件编写单元测试。有一个出色的库Web组件测试器，但我相信它仅适用于用聚合物创建的组件。

由于我的组件不是聚合物纤维网组件，而是天然的组件，因此有人可以为我指明进行单元测试的正确方向。

我最近创建了一个在所有浏览器中运行良好的原生 Web 组件。我将此 Web 组件移动到 Angular 6 应用程序中，并且一切正常。然后我尝试扩展一个原生 HTML 元素，该元素再次完美运行，除非我将它带入我的 Angular 6 应用程序。

使用 Mozilla 的示例，我将尝试说明我的问题。使用以下尝试扩展本机“p”元素：

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text …

我正在用javascript编写一个记忆游戏.我已经制作了一个用于卡片<memory-card>的网络组件,以及一个用于包含卡片和处理游戏状态的网络组件<memory-game>.的<memory-card>类包含其图像路径,用于当其翻转,默认图像显示为卡的背面,它的导通状态和onclick处理状态和图像之间的切换功能.

所述<memory-game>类具有接收图像,以生成的阵列的设置器<memory-cards>从.处理<memory-game>课堂上更新游戏状态的最佳方法是什么？我应该在那里附加一个额外的事件监听器,<memory-card>还是有更好的方法来解决它？我希望这些<memory-card>元素只能像现在一样处理它们自己的功能,即在点击时根据状态更改图像.

内存game.js

class memoryGame extends HTMLElement {
  constructor () {
    super()
    this.root = this.attachShadow({ mode: 'open' })
    this.cards = []
    this.turnedCards = 0
  }

  flipCard () {
    if (this.turnedCards < 2) {
      this.turnedCards++
    } else {
      this.turnedCards = 0
      this.cards.forEach(card => {
        card.flipCard(true)
      })
    }
  }

  set images (paths) {
    paths.forEach(path => {
      const card = document.createElement('memory-card')
      card.image = path
      this.cards.push(card) …

我不明白为什么在对主机本身起作用时，像这样的伪类:focus-within需要在:host()函数括号内。为什么不能:host:focus-within div？更奇怪的是它在:host另一个:host().

class MyElementFail extends HTMLElement {

	constructor(...args) {
		super(...args)

		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px;
      background-color: salmon;
    }
    :host div{
      background-color: white;
    }
    /*This part is different:*/
		:host:focus-within div{
			background-color: green;
		}
		</style>
    <input type="text" value="click in here"/>
		<div>
    Change to green
		</div>`
	}
}
window.customElements.define('my-element-fail', MyElementFail);


class MyElement extends HTMLElement {

	constructor(...args) {
		super(...args)

		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px; …