标签: web-component

我听说有一个codelab教你如何在Dart中使用Web组件？真的吗？如果是这样,如果我被卡住怎么办？

假设我已经定义了两个自定义的Polymer元素

<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
    <script>
        Polymer('child-el', {
            /* -- Attributes ------------------------------------------------ */
            foo: 'qux'

            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Child');
            },
            /* -- Public Methods -------------------------------------------- */
            getFoo: function() {
                return [this.foo];
            }
        });
    </script>
</polymer-element>

<!-- Define custom element -->
<polymer-element name="parent-el">
    <script>
        Polymer('parent-el', {
            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Container');
            },
            ready: function() {
                // This is the part that doesn't seem to …

使用Polymer,我正在尝试创建一个重用markItUp的组件,这样我就可以在需要时使用富文本编辑器.

但是,尽我所能,我无法正确初始化它.jQuery选择器根本找不到textarea元素来执行它的魔力.我尝试过添加事件监听器,响应特定事件,并且很可能由于我缺乏Javascript经验而尝试了很多咒语,我只是无法将它们全部合作.这是我到目前为止(请注意,此文件位于名为"rich-textarea"的元素下的文件夹中):

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/sets/default/style.css">

<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/sets/default/set.js"></script>

<polymer-element name="rich-textarea" attributes="rows cols value">
    <template>
        <textarea class="makeItRich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>
    </template>
    <script>
        Polymer('rich-textarea', {
            value: "",
            rows: 25,
            cols: 80,
            // here and below are where I need help
            domReady: function() {
                $(document).ready(function() {
                    $(".makeItRich").markItUp(mySettings);
                });
            }
        });
    </script>  
</polymer-element>

任何帮助将不胜感激.我认为这个问题对聚合物来说是一个很好的试金石,因为它将三种技术结合在一起.如果这"正常",大多数事情可能会继续发挥作用.谢谢你的时间.

我下载了Polymer入门套件(Polymer 1.0),并且一直在尝试在我的网页上添加一个简单的纸质按钮,但它无法正确渲染.这是相关代码:

<section data-route="home">
      <paper-material elevation="1">

        <paper-button raisedButton
          id='rendered'
          label='patient'
          on-click='{{clickHandler}}'></paper-button>

        <button>Try Me</button>

        <paper-icon-button icon="refresh" label="label"></paper-icon-button>
        <paper-button raisedButton>search!</paper-button>

      </paper-material>

    </section>

第一个按钮根本没有显示,第二个按钮没有显示,第三个按钮工作,但标签没有显示,最后一个按钮呈现为文本,不可点击

我正在尝试访问Polymer自定义元素中包含的Javascript方法<general-element>.此元素包含打开和关闭面板的功能.

这个通用元素在更具体的元素中使用,例如:<specific-element></specific-element>.特定元素包含常规元素并向其添加属性,即:面板标题等.

但是,在<specific-element>页面中使用时,我无法通过它调用任何打开/关闭方法.我是从错误的方式接近这个,有没有办法做到这一点？

编辑:代码示例

删除了一些Polymer代码 - 示例只是为了说明元素如何协同工作

一般元素:

<dom-module id="general-element">
    <template>
        // Code to define a slide-in panel
    </template>

    <script>
        _openPanel: function() {
            //Apply class to make panel visible
        },
        _closePanel: function() {
            // Apply class to hide panel
        }
    </script>
</dom-module>

具体要素:

<dom-module id="specific-element">
    <template>
        <general-element title="Administration Panel" >
            <h1>Hello</h1>
        </general-element>
    </template>
</dom-module>

用法:

<dom-module id="admin-page">
    <template>
        <button on-click="openPanel"></button>
        <specific-element></specific-element>
    </template>

    <script>
        openPanel: function() {
            // Trying to call general-element _openPanel method
        } …

无论您使用什么框架,Web组件的概念都是模块化Web.

Polymer项目承诺创建Web组件的可能性,而不是框架,因此应该可以将它与任何框架一起使用.更重要的是,我应该能够从元素目录中下载元素,并在没有聚合物库的情况下使用它,只需使用webcomponents.js.

我认识到这是一个正在进行的项目,大多数浏览器的供应商仍在开发Web组件要求,但到目前为止我得出的结论是,Polymer正在成为一个新的框架,因为我不能使用他们的元素而没有Polymer库和与框架一起使用,因为Angular 2尚未运行良好.

这是一种以真正的模块化方式使用Web组件的方法,而没有Polymer建议的所有样板吗？

现在，如果您遵循自定义元素spec的v1的确切规范，则不可能在不支持类的浏览器中使用自定义元素。

有没有一种方法可以创建v1自定义元素而不使用类语法，以使它们在Chrome，FireFox和IE11中完全起作用。另外，由于IE11不对自定义元素提供本机支持，所以我假设我们可能需要使用一些pollyfills，那么，为了在IE11中实现此功能，我们需要哪些polyfills或库？

我已经弄乱了Polymer 2，Polymer 3和Stencil，但是它们对于我们要创建的某些东西来说有点繁重。

这个问题似乎是在正确的轨道上，但是让它在IE11中工作时遇到了一些麻烦，因此，如何才能在IE11中使用Reflect.construct来实现自定义元素？

我正在使用stenciljs构建一个Web组件，并且我无法基于称为主题的属性加载CSS主题文件。

@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})

export class PmHeader {

  @Prop() theme: string = 'default';

  ...

  render() {
    return (<nav class={this.theme}></nav>)
  }
}

非常喜欢新的ionic 4组件-尤其是NO Angular。

但问题：我像这样使用ion-nav：

navElRef.push('second-page')

动画不正确。看来我没有设置正确的参数或类名之类的东西。是否有有关如何使用Ionic 4 nav的无角度文档/建议？

我正在用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) …