Bir formun içine yerleştirilebilen ve herhangi bir girdi öğesi gibi davranabilen bir Web Bileşeni oluşturmak için nasıl// veya sadece "öyle mi?") Mümkün mü? Başka bir deyişle, Web Bileşenleri özel giriş elemanları oluşturmak için kullanılabilir mi?Can Web Bileşenleri, özel giriş öğeleri oluşturmak için kullanılabilir mi?
cevap
testten önce şu tarayıcı yapılandırma seçenekleri kullanın:
- Chrome:
about:flags => Enabled Experimental WebKit Features/Enable Experimental Web Platform
- Firefox:
about:config => dom.registercomponents.enabled
document.registerElement
etkinleştirmek için.
/* Cross-browser fallback */
document.registerElement = document.registerElement || document.register;
/* Element registration using x-tag format */
var MegaButton = document.registerElement('x-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
Kaynaklar
- Extending Native Elements
- HTML as Custom Elements
- Extending Custom Elements :
- Create Custom HTML Elements
- x-tag and the Web Components Family
- Performance and Custom Elements
- Mozilla: Custom Elements
- Detailed Introduction to Custom Elements
- Web Components: The Chromium Projects
- Web Components Best Practices
- Component Model Wiki
- Web Component Proposals: Type Extensions
doğal bir girdi elemanının uzatmak document.registerElement
arasında extends
parametre ile
[Burada görünmeyen bir demo var. sağladığınız kodu kullanarak Chrome veya Firefox'ta çalışın] (http://jsfiddle.net/sBWr2/). Bir şey mi eksik? "Deneysel Web Platformu özelliklerini etkinleştir" seçeneğinin etkin olarak ayarlandığını iki kez kontrol ettim. – zzzzBov
@zzzzBov Başlıklar için teşekkürler. Firefox'ta çalışmak için [http://jsfiddle.net/sBWr2/46/] [http://jsfiddle.net/sBWr2/46/] güncelledim ve [başka bir örnek] buldu (http://jsfiddle.net/Buttonpresser/9W4pe/) Özel etiketin görüntüleme özelliklerini tanımlamak için stil sayfası kurallarını kullanma. –
Açık olması gerekirse, özel öğelerle yaşadığım sorun kayıt, oluşturma veya stil oluşturma ile birlikte görünmüyor. Bu, şeylerin işe yaramadığı form verilerini temsil etmeleri gerektiği zaman. Özel bir öğenin kaydedilebileceği, ancak bir formun bir parçası olarak gönderilebileceği veya bir form göndermek için tıklandığı bir örnek görmedim. – zzzzBov
Polymer kullanarak Google tarafından oluşturulan özel bir giriş öğesi örneği: https://www.polymer-project.org/components/paper-input/demo.html – Ajedi32