标签: web-component

我有一个(聚合物)Web组件,我希望以跨域资源共享(CORS)方式让人们可以访问.这工作正常,但我不确定如何为该组件内的JS代码提供图像和JSON文件等资源的相对路径.它们被解释为相对于包含页面,而不是相对于HTML导入.我想我想要的是一个JS变量,它给出了导入的包含html文件的路径.相对路径很重要,因为我还希望人们能够轻松地将其部署到自己的站点,而不是依赖于我的资源副本的硬编码路径.

例如,您在example.com上加载index.html,它具有:

<link rel="import" href="//my-site.com/components/my-component/my-component.html">

<my-component> ... </my-component>

Run Code Online (Sandbox Code Playgroud)

现在在里面my-component.html,我有一些JS根据用户的配置文件加载一些资源 - i18next.js的图像和JSON语言文件.问题是,除非我将它们指定为绝对路径my-site.com,我不想这样做,它们将被解释为相对于页面而example.com/index.html不是相对于路径my-component.html

我在模板中静态指定的任何图像都可以正常工作并正确加载,因为它与HTML导入路径相关.我只是不确定如何为从JS加载的资源执行此操作,因为它们将相对于包含页面(example.com/index.html).是否存在暴露此导入路径的某个属性或函数？谢谢.

web-component polymer

Pre*_*ers

lucky-day

2
推荐指数

1
解决办法

2926
查看次数

Polymer 1.0中的核心动画页面

我注意到core-animated-pages在Polymer 1.0中没有替代品(没有iron-animated-pages).我错过了什么吗？有没有其他方法来实现类似的功能？任何答案都非常感谢.

web-component polymer polymer-1.0

Vla*_*kyi

lucky-day

2
推荐指数

1
解决办法

1269
查看次数

使用:host-context()和相邻的兄弟选择器

我正在尝试使用:host-context()和相邻的兄弟选择器来设置这样的元素:

<x-foo id="1" active></x-foo>
<x-foo id="2"></x-foo> <!-- use :host-context() to target #2 when adjacent sibling, #1 is [active] -->
<x-foo id="3"></x-foo>

Run Code Online (Sandbox Code Playgroud)

我的元素定义类似于:

<dom-module id="x-foo">
    <template>
        <style>
           :host-context(x-foo[active] + x-foo) {
               background-color: yellow;
           }
        </style>
        Hello
    </template>
    <script src="x-foo.js"></script>    
</dom-module>

Run Code Online (Sandbox Code Playgroud)

然而,这并不是很有效.为什么不？

html css css-selectors css3 web-component

Cas*_*sey

2016 08-18

2
推荐指数

1
解决办法

1284
查看次数

使用属性装饰器严格检查属性类型

有没有一种方法可以验证Typescript中装饰的属性的类型？我想要一个仅适用于boolean类属性，而不适用于例如string（下面的示例）的属性装饰器。这可能吗？

（注意：我不希望通过reflect-metadata进行运行时验证，而只是使用Typescript进行编译类型警告。）

function booleanProperty<T extends HTMLElement>(target: T, prop: string) {
  // `target` will be the class' prototype
  Reflect.defineProperty(target, prop, {
    get(this: T): boolean {
      return this.hasAttribute(prop);
    },
    set(this: T, value: boolean): void {
      if (value) {
        this.setAttribute(prop, '');
      } else {
        this.removeAttribute(prop);
      }
    }
  });
}

class MyElement extends HTMLElement {
  @booleanProperty
  foo: boolean;

  @booleanProperty
  bar: string; // TS compile error
}
customElements.define('my-element', MyElement);

Run Code Online (Sandbox Code Playgroud)

decorator web-component typescript

Csv*_*svn

lucky-day

2
推荐指数

1
解决办法

446
查看次数

Angular 5组件在选择器中需要`-`吗？

我正在审查这个Angular 5表单youtube教程,其中Sebastian最初有一个名为的表单选择器app-form01,但是他删除了该app-部分.IIUC自定义元素应该具有-.这放松了吗？

javascript web-component angular

Ole*_*Ole

lucky-day

2
推荐指数

1
解决办法

782
查看次数

为什么我必须推迟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
查看次数

如何为所有实例设置相同的组件子动态宽度？Web组件

假设我在Web应用程序中有一个代表扩展器控件的小组件,即标题文本,展开/折叠的图标和一些内容.

一个非常简单的React实现(伪代码)可能如下所示:

const Expander = ({children, title, onExpandToggle, isExpanded}) => (
  <div>
    <div><span>{title}</span><img src={...} onClick={onExpandToggle} /></div>
    {isExpanded && children}
  </div>
);

Run Code Online (Sandbox Code Playgroud)

此实现显示标题后面的图标,因此图标的位置由标题的长度决定.

它可能看起来像这样:

现在假设下面有多个像这样的人.它变得凌乱:

为了使这个更清洁,所有图标应该从左边有相同的填充.填充不应该是固定的而是动态的,因此最长的标题决定了所有图标的位置:

假设我想将扩展器保留在自己的组件中,是否有一种CSS方法来实现我的目标？

到目前为止,我还没有尝试任何东西,因为我没有起点.在WPF中,我会使用类似的东西SharedSizeGroup,但CSS不存在.

html javascript css web-component reactjs

Dan*_*rth

2018 12-09

2
推荐指数

1
解决办法

386
查看次数

在Web组件中获取事件目标

<a>当用户与Web组件进行交互时，将创建锚元素（）。问题是，单击锚点后，无法从Web组件的“外部”返回锚点元素。

我添加了一个事件监听器来document监听点击事件。当单击DOM中某处的元素时，我希望成为e.target被单击的元素。在Web组件内部某处单击的情况下，<fancy-list></fancy-list>将返回自定义元素（）-而不是单击的元素。

当影子DOM的模式设置为openDOM时，应该可以访问。





class Fancylist extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const wrapper = document.createElement('div');
    wrapper.innerHTML = `<ul></ul><button>Add item</button>`;

    shadow.appendChild(wrapper);

    this.on_root_click = this.on_root_click.bind(this);
  }

  connectedCallback() {
    this.ul_elm = this.shadowRoot.querySelector('ul');
    this.shadowRoot.addEventListener('click', this.on_root_click, false);
  }

  on_root_click(e){
    switch(e.target.nodeName){
      case 'BUTTON':
        this.ul_elm.innerHTML += '<li><a href="p1">List item</a></li>';
        break;
      case 'A':
        e.preventDefault();
        console.log('You clicked a link!');
        break;
    }
  }
}

customElements.define('fancy-list', Fancylist);
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
  <head>
    <title>List</title>
    <meta charset="utf-8" /> …
Run Code Online (Sandbox Code Playgroud)
Run Code Online (Sandbox Code Playgroud)

Run Code Online (Sandbox Code Playgroud)

javascript events dom web-component shadow-dom

chr*_*ahl

lucky-day

2
推荐指数

1
解决办法

81
查看次数