我正在寻找布局我们的新网络组件的结构,我目前还不确定我是否找到了一个工具,它可以完成我们理想的所有工作,或者非常接近,但看起来它是公平的现在常想做的事情.
我们有一个运行Java服务器端的Web应用程序,而客户端我们大量使用JavaScript和SASS等.我们希望重新构建我们的一些代码库,并组合我们的动态页面内容的某些方面.
例如,我们希望有一个标准的表组件,可以完全独立于完整的Web应用程序开发.我看到表组件有以下3个核心文件:
然后帮助发展:
然后希望将所有这些文件编译成以下内容:
我看过的工具:
有没有人比上面的建议有更好的建议？什么东西更接近我们正在寻找的东西？理想情况下,不需要Node.js或Ruby的东西会更好......
我正在尝试将HTML文档导入到我的主文档中
<link rel="import" href="my-tabs.html">
但它似乎没有起作用.
我正在使用Chrome 28 关注此演示文稿,并且我在以下位置启用了这两个标志about:flags:
Enable experimental WebKit features
Enable experimental JavaScript
我错过了什么吗？或者我需要启用另一个标志才能获得它吗？
我在Chrome Canary(33.0.1712.3)中探索导入,模板,影子DOM和自定义元素.在网格布局中,我有一个特定的内容元素(显示区域),它将显示从文件导入的不同Web组件或克隆的轻型DOM片段.但是,一旦添加了阴影DOM,我就无法重新显示普通的HTML DOM,因为我不知道如何删除阴影根.一旦创建,阴影根就会保留并干扰普通DOM的呈现.(我已经查看了各种W3C规范,例如Web组件介绍,影子DOM,模板,Bidelman关于HTML5 Rocks的文章等).我在下面的一个简单示例中找到了问题:
点击"show plain old div"; 点击"显示阴影模板"; 点击"show plain old div".每次点击后检查devtools.第三次点击后,按钮下面没有输出,在我看到的devtools中:
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要添加什么来removeShadow()来删除阴影根并完全将内容元素重置为其初始状态？
removing_shadows.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<template id="shadowedTemplateComponent">
<style>
div { background: lightgray; }
#t { color: red; }
</style>
<div id="t">template</div>
<script>console.log("Activated the shadowed template component.");</script>
</template>
<template id="plainDiv">
<div id="plaindiv">Plain old div</div>
</template>
</head>
<body>
<div>
<input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
<input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
<div id="content"></div>
</div> …您如何/可以避免每个Web组件发出服务器请求？
所以,有了javascript,很多人现在正在使用所谓的AMD模块加载模型,其中所有模块都是单独的javascript文件,并根据需要包含在内.例如.
- main.js
-- module1/mod1.js
-- module2/mod2.js
-- module3/mod3.js
这导致对服务器的多个请求,每个javascript文件一个.这被认为对应用程序性能有害,特别是在移动设备中,随着javascript模块数量的增加.
因此,诸如require.js之类的工具提供了一个编译器,它将自动跟踪依赖关系并生成包含其中所有模块的单个javascript文件; 有效地减少了单个文件的请求开销(通常是app-min.js).
每个Web组件都位于外部文件岛中,并使用标头中的链接标记导入:
<link rel="import" href="elements/image-gallery.html">
<link rel="import" href="elements/social-media.html">
<link rel="import" href="elements/pinmap.html">
<link rel="import" href="elements/nav-menu.html">
如果你正在使用聚合物,你可以使用硫化工具来组合聚合物组分(http://www.polymer-project.org/articles/concatenating-web-components.html),但这是因为(据我所知) polymer是一个javascript框架,可以从"polymer-element"标签动态加载Web组件.
使用不依赖于x-tag或聚合物等框架工作的"vanilla"Web组件是否有相同的方法？
我正在寻找一种方法来包含异步angularJS应用程序,它自己的样式和视图包含在JS中的Polymer组件中.做某种事iframe.
如果您有任何想法,建议或现实世界的例子,那将非常有帮助!
在AngularJS 1.5中,我想将一个组件的绑定传递给(多槽)转换范围 - 用于模板中的引用(在一个特定的或全部的中 - 没有任何方法可以).
这用于创建通用自定义选择列表
// Component
.component('mySelect', {
bind: {
collection: '<'
},
transclude:{
header: 'mySelectHeader',
item: 'mySelectItem'
},
templateUrl: 'my-select-template',
controller: function(){
.....
}
});
...
// Component template
<script id="my-select-template" type="text/ng-template">
<ol>
<li ng-transclude="header"> </li>
<li ng-transclude="item"
ng-click="$ctrl.select($item)"
ng-repeat"$item in $ctrl.collection">
</li>
</ol>
</script>
...
// Example usage
<my-select collection="[{id: 1, name: "John"}, {id: 2, name: "Erik"}, ... ]>
<my-select-head></my-select-head>
<!-- Reference to $item from ng-repeate="" in component -->
<my-select-item>{{$item.id}}: {{$item.name}}</my-select-item>
</my-select>
这是可能的.component()吗？使用自定义指令 …
web-component angularjs transclusion angularjs-directive angularjs-scope
我一直在寻找有人在angularjs/angular上的web应用程序中创建新组件的逻辑,但我想这更通用,可能适用于所有基于组件的前端框架.
我知道有一些原则,例如它应该是抽象的和可重用的,但是我已经在角度文档上看到每个单独的路径都看着一个特定的组件(这怎么可以重用).在创建新组件之前,我可能会问一些可靠的问题吗？
我需要建立一个应该需要工作与两个规格，组件custom elements spec v0它得到了过时和custom elements spec v1，最新的稳定版本。
如果我使用custom elements v0规范构建组件，则某些应用程序将因为使用polymer 2和高于它们而面临问题，而与polymer 1无法使用custom elements v1规范的应用程序将面临同样的问题。
我无法控制更改Polyfill的应用程序，某些应用程序必须使用支持旧规范的Polyfill，而某些应用程序需要使用新的Polyfill。
我正在寻找一个可靠的解决方案，以结合这两个规范以在所有应用程序中运行我的自定义元素，而不管polyfills版本如何。我可以在组件中添加任何polyfill或snippet，以便它们可以在任何地方运行，但在我的研究中没有找到任何支持这两种规范的库或polyfill。
我打算编写一个适配器，该适配器可以结合下面提到的用于映射的回调的两个规范，对此思想的投入将不胜感激。
connectedCallback(){
this.attachedCallback();
}
我尝试使用stenciljs，但它只能与最新版本的自定义元素规范一起使用。我还没有找到任何方法来对其进行调整以使其与早期规范兼容。
请针对上述情况提出一些可行的替代方案和可行的解决方案。
我实际上正在使用自定义Polymer元素(基于web组件和shadow-dom)构建Web应用程序,但我遇到了一个严重的问题.
我希望这个应用程序在Android 4.4 WebView上运行,但是当我在WebView上测试应用程序时,我遇到了shadow-dom的一些问题,尽管它在Chrome(Android和桌面)上运行得非常好.当我尝试从CSS(使用:: shadow或/ deep /)或从纯js访问shadowRoot元素时,会发生此问题.
这是我的问题的简单说明:
<!-- custom-elt.html -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="custom-elt">
<template>
<div id="elt">some content</div>
</template>
<script>
Polymer('custom-elt',{
getElt: function(){
return this.shadowRoot.getElementById('elt');
}
});
</script>
</polymer-element>
// script.js
window.addEventListener('polymer-ready',function(){
var e = document.getElementsByTagName('custom-elt')[0];
alert(e.getElt().innerHTML);
});
适用于Chrome,但不适用于WebView.根据caniuse.com的说法,shadow-dom是由Android 4.4浏览器(WebView使用的吗？)和'webkit'前缀(http://caniuse.com/#feat=shadowdom)支持的,但我没有'找到一种方法将它与前缀一起使用.
有解决方案吗
谢谢
巴蒂斯特
我正在使用带有 Flow 类型的 React useRef，并且我正在尝试为第三方 Web 组件库编写一个包装器组件。
Web 组件需要一个 changeCallback 函数，我正在使用 ref 将其分配给 ref。
function RadioButtonGroup({ onChange, children }) {
const ref: { current: null | ElementRef<ElementType> = React.useRef(null);
React.useEffect(() => {
if (ref.current) ref.current.changeCallback = onChange;
}, [onChange]);
return <web-component ref={ref}>{children}</web-component>
}
由于 HTMLElement 不包含名为 changeCallback 的属性，因此流程会引发错误。
无法分配给
handleChange，ref.current.changeCallback因为属性changeCallback缺失HTMLElement
我尝试使用这样的属性扩展“ElementType”
ElementRef<ElementType & { changeCallback: Function }>
但这会导致以下错误：
无法实例化，
ElementRef因为对象类型 [1] 不是 React 组件。
Web 组件不会在更改时触发“更改”事件。它执行函数changeCallback。这是库的文档。
// MyComponent.js
class MyComponent extends Component { …web-component ×10
javascript ×4
angularjs ×2
html ×2
reactjs ×2
shadow-dom ×2
android ×1
angular ×1
flowtype ×1
html-imports ×1
html5 ×1
maven ×1
polyfills ×1
polymer ×1
react-hooks ×1
requirejs ×1
transclusion ×1
vue.js ×1
webview ×1