标签: custom-element

聚合物定制样式有时会变得不正确

我注意到，使用聚合物自定义样式时，级联并不总是正确的。从外观上看，这可能是将级联应用于自定义元素的方式中的一个错误，但是我只是想确认我没有做任何愚蠢的事情。

考虑以下自定义元素的作用域样式：

    #price ::content .price span {
        display: block;
        padding: 4px;
        border-top: 1px solid var(--color-gray1);
    }
    #price ::content .price span:first-child { border-top: none; }

Run Code Online (Sandbox Code Playgroud)

...但是一旦渲染，：first-child将被第一个定义覆盖，如下图所示。确保border: none正确应用my的唯一方法是使用!important，而我不希望这样做。

在此处输入图片说明

我应该注意，我已经在许多其他地方看到了这种行为，并选择仅用!important作快速解决方案，但这开始变得笨拙。

只需在此处添加渲染元素的图像即可显示“不正确”的顶部边框。

在此处输入图片说明

css polymer custom-element

And*_*dre

2015 07-17

2
推荐指数

1
解决办法

150
查看次数

使用Aurelia <content>元素

我正在尝试创建一个自定义元素,允许用户在创建元素时指定元素的内容,如下所示:

<custom-element title="Hello">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</custom-element>

Run Code Online (Sandbox Code Playgroud)

我的自定义元素基本上如下所示:

<template>
    <div class="my-custom-element">
        <h2 if.bind="title">${title}</h2>
        <content></content>
    </div>
</template>

Run Code Online (Sandbox Code Playgroud)

我已经完全猜到了<content>元素的使用,它看起来并不像这样.我也找不到任何文件.我见过别人用用它select的属性指向一个特定元素中的自定义元素的内容,但我想访问它里面的一切-而不是一个特定的元素.

我究竟做错了什么？

custom-element aurelia

pow*_*uoy

2016 08-05

2
推荐指数

1
解决办法

1040
查看次数

我可以通过自定义元素使用Preact组件吗？

我想创建一个Preact组件,让人们使用它,即使他们没有构建Preact应用程序.

示例:我想<MyTooltip>在Preact中构建一个组件,将其捆绑(与Preact运行时一起),并让人们将其作为脚本标记加载,纯粹以声明方式使用它,可能如下:

<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">

<my-tooltip content="Tooltip content">Hover here</my-tooltip>

Run Code Online (Sandbox Code Playgroud)

有没有办法捆绑一个组件,使其包含Preact运行时,我的库代码和钩子<my-tooltip>元素？

换句话说,我可以将Preact组件作为自定义元素进行互操作,类似于ReactiveElements吗？

custom-element preact

mat*_*ele

lucky-day

2
推荐指数

1
解决办法

449
查看次数

在Polymer 2.0中的HTMLElement.onclick中未定义未捕获的ReferenceError抽屉？

我是聚合物2.0的新手,我正试图解决我似乎无法理解的某些错误.

其中一个是这样的:

Uncaught ReferenceError: drawer is not defined at HTMLElement.onclick

所以为了解释我的问题,我试图使用app-drawer哪个将在点击事件中从左向右滑动.但click事件会返回上述错误.如何确定抽屉的定义？(顺便说一句,我正在按照app-layout部分主网站上提供的代码片段进行操作. - https://www.webcomponents.org/element/PolymerElements/app-layout).

这是我的代码:

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    <div main-title>My app</div>
    <paper-icon-button icon="delete"></paper-icon-button>
    <paper-icon-button icon="search"></paper-icon-button>
    <paper-icon-button icon="close"></paper-icon-button>
    <paper-progress value="10" indeterminate bottom-item></paper-progress>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>

Run Code Online (Sandbox Code Playgroud)

这在网站上是完全相同的,所以为什么它适用于他们,但不适用于我.

单击菜单图标时会出现问题.

请帮忙.

谢谢

html onclicklistener polymer custom-element polymer-2.x

Jam*_*mes

lucky-day

2
推荐指数

1
解决办法

1198
查看次数

创建自定义表格行

我正在尝试创建一个自定义表格行，但很难让它正常运行。我尝试了以下两种方法，它们给出了奇怪的结果。我意识到这很容易在没有自定义元素的情况下实现，但这是一个更大项目的一个小例子。我可以改变什么来达到预期的结果？

class customTableRow extends HTMLElement {
  constructor(){
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    
    this.tableRow = document.createElement('tr');
    

    var td = document.createElement('td');
    td.innerText = "RowTitle";
    this.tableRow.appendChild(td);
    
    var td2 = document.createElement('td');
    td2.innerText = "RowContent";
    td2.colSpan = 4;
    this.tableRow.appendChild(td2);

    shadow.appendChild(this.tableRow);
  }
  
}

customElements.define('custom-tr', customTableRow);

//Attempt 2
var newTr = new customTableRow;
document.getElementById('table2Body').appendChild(newTr);

Run Code Online (Sandbox Code Playgroud)

td {
  border: 1px solid black;
}

Run Code Online (Sandbox Code Playgroud)

<span>Attempt 1:</span>
<table>
  
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <custom-tr />
  </tbody>
  
</table>

<hr>

<span>Attempt 2:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th> …

Run Code Online (Sandbox Code Playgroud)

html javascript web-component shadow-dom custom-element

h01*_*000

2017 08-24

2
推荐指数

1
解决办法

2401
查看次数

扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃

我需要从HTMLTextAreaElement扩展自定义元素,以便在表单中使用并直接获取值.但我总是得到Illegal Constructor Message

HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <working-element></working-element>
    </div>
    <div>
      <crashing-element></crashing-element>
    </div>
  </body>
  <script src="myScript.js">
</html>

Run Code Online (Sandbox Code Playgroud)

Typescript(编译为ES6到myScript.js):

// all works fine
class newElementWorks extends HTMLElement {
  constructor(){
    super();
    console.log('newElementWorks');
  }
}
customElements.define('working-element', newElementWorks);

// this one crashes on super() call
class newElementCrash extends HTMLTextAreaElement {
  constructor(){
    super();
    console.log('newElementCrash');
  }
}
customElements.define('crashing-element', newElementCrash);

Run Code Online (Sandbox Code Playgroud)

该脚本在支持ES6和Custom-Element的Chrome版本63.0.3239.132上执行

我媒体链接试图包括webcomponents /定制元素填充工具

你有什么想法为什么从HTMLElement崩溃以外的地方延伸？

javascript html5 typescript ecmascript-6 custom-element

mti*_*ani

lucky-day

2
推荐指数

1
解决办法

1175
查看次数

自定义HTMLElement的connectedCallback（）中的textContent为空

在connectedCallback()我的自定义元素的方法中，textContent它作为空字符串返回。

本质上，我的代码可以归结为以下内容...

class MyComponent extends HTMLElement{
    constructor() {
        super()

        console.log(this.textContent) // not available here, but understandable
    }           

    connectedCallback() {
        super.connectedCallback() // makes no difference if present or not

        console.log(this.textContent) // not available here either, but why?!
    }
}

customElements.define('my-component', MyComponent);

Run Code Online (Sandbox Code Playgroud)

还有HTML ...

<my-component>This is the content I need to access</my-component>

Run Code Online (Sandbox Code Playgroud)

从阅读方面看，connectedCallback()这听起来好像是在将元素添加到DOM后就被调用了，所以我希望textContent属性应该是有效的。

我正在使用Chrome 63，如果有帮助...

javascript web-component web custom-element native-web-component

Jon*_*son

2018 10-19

2
推荐指数

3
解决办法

544
查看次数

为什么我必须推迟customElement定义？

似乎我必须在解析HTML主体后才定义自定义元素.如果我之前定义它,则自定义元素的内容为空.

这是一个MWE:

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    customElements.define('test-one',
      class extends HTMLElement {
        constructor() {
          super()
          console.log(this.textContent)
        }
      }
    )
  </script>
</head>

<body>
  <test-one>First.</test-one>
  <test-two>Another.</test-two>

  <script>
    customElements.define('test-two',
      class extends HTMLElement {
        constructor() {
          super()
          console.log(this.textContent)
        }
      }
    )
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

test-one输出""在控制台中,test-two输出"Another.".

然而,这似乎完全不直观,我浪费了很多时间阅读规范,但我没有找到这种行为的解释.有任何想法吗？指定或记录在哪里？这不是Chrome问题,Firefox表现相同.

javascript web-component custom-element

MiB*_*MiB

lucky-day

2
推荐指数

1
解决办法

91
查看次数

Angular Elements：@Input装饰器无法使用变量

我有几个分离的Web组件，它们由角元素构成，我将其导入到一个主要的组件中，该组件具有路由器，是基础应用程序。路线非常简单：

import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
    selector: 'example',
    template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
    styles: []
})
export class ExampleComponent {
    public toPass: string = "Hello World!";

    constructor(private router: Router) {}

    onCallback(event) {
        console.log(event);
        this.router.navigate(['example-two']);
    }
}

Run Code Online (Sandbox Code Playgroud)

组件可以执行应做的事情。

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: "component-one",
    templateUrl: "./component-one.html",
    styleUrls: ["./component-one.scss"],
    encapsulation: ViewEncapsulation.Emulated,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentOne implements OnInit {
    @Input() variable: string;
    @Output() callback = new EventEmitter<any>();

    constructor() {} …

Run Code Online (Sandbox Code Playgroud)

custom-element angular angular-elements

Rom*_*ain

2018 09-28

2
推荐指数

2
解决办法

1186
查看次数